花瓣下落js效果

花瓣下落的JavaScript效果通常是通过CSS动画和JavaScript结合来实现的，用于创建一个视觉上吸引人的页面元素，模拟花瓣缓缓落下的自然现象。以下是实现这一效果的基础概念和相关信息：

基础概念

CSS动画：用于定义花瓣下落的动画效果。
JavaScript：用于控制花瓣的生成和动画的触发。
DOM操作：JavaScript用于在页面上动态创建和移除花瓣元素。

实现步骤

HTML结构：创建一个容器来放置花瓣。
CSS样式：定义花瓣的样式和动画效果。
JavaScript逻辑：生成花瓣元素并应用动画。

示例代码

HTML

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

CSS

#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);
  }
}

JavaScript

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);