花瓣下落js效果

<div id="petal-container"></div>

#petal-container {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.petal {
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: pink;
  border-radius: 50%;
  animation: fall linear infinite;
}

@keyframes fall {
  from {
    transform: translateY(-100%) rotate(0deg);
  }
  to {
    transform: translateY(100%) rotate(360deg);
  }
}

function createPetal() {
  const container = document.getElementById('petal-container');
  const petal = document.createElement('div');
  petal.className = 'petal';
  petal.style.left = `${Math.random() * 100}vw`;
  petal.style.animationDuration = `${Math.random() * 3 + 2}s`;
  container.appendChild(petal);

  // Remove the petal after the animation ends to avoid memory leaks
  petal.addEventListener('animationend', () => {
    container.removeChild(petal);
  });
}

setInterval(createPetal, 100);