纯HTML、CSS和JS实现樱花飘落动画及鼠标排斥效果

<!DOCTYPE html>
<html>
<head>
  <title>樱花动画</title>
  <style>
    body {
      background-color: #f9c2cd; /* 淡粉色背景 */
      margin: 0;
      overflow: hidden;
    }
<pre><code>.sakura {
  position: absolute;
  display: block;
  background-color: #f93c6a; /* 深粉色樱花 */
  border-radius: 50%;
  pointer-events: none;
}

.sakura {
  width: 10px;
  height: 10px;
  animation: fall 5s linear infinite;
}

@keyframes fall {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(100vh);
    opacity: 0;
  }
}
</code></pre>
  </style>
</head>
<body>
  <script>
    // 创建樱花动画
    function createSakura() {
      const sakura = document.createElement('div');
      sakura.className = 'sakura';
      sakura.style.left = Math.random() * window.innerWidth + 'px';
      sakura.style.animationDuration = Math.random() * 5 + 5 + 's';
      sakura.style.animationDelay = Math.random() * 2 + 's';
      document.body.appendChild(sakura);
<pre><code>  // 樱花达到底部后消失
  sakura.addEventListener('animationend', () =&gt; {
    sakura.remove();
  });
}

// 监听鼠标移动事件
document.addEventListener('mousemove', (e) =&gt; {
  const sakuras = document.querySelectorAll('.sakura');
  sakuras.forEach((sakura) =&gt; {
    const rect = sakura.getBoundingClientRect();
    const sakuraX = rect.left + rect.width / 2;
    const sakuraY = rect.top + rect.height / 2;

    const mouseX = e.clientX;
    const mouseY = e.clientY;

    const distance = Math.sqrt((sakuraX - mouseX) ** 2 + (sakuraY - mouseY) ** 2);
    const maxDistance = Math.min(window.innerWidth, window.innerHeight) / 2;

    // 鼠标经过时排斥效果
    if (distance &lt; maxDistance) {
      const force = (1 - distance / maxDistance) * 30;
      const angle = Math.atan2(sakuraY - mouseY, sakuraX - mouseX);
      const offsetX = Math.cos(angle) * force;
      const offsetY = Math.sin(angle) * force;

      sakura.style.transform = `translate(${offsetX}px, ${offsetY}px)`;
    }
  });
});

// 创建樱花动画定时器
const timer = setInterval(createSakura, 1000);

// 页面加载完成时清除定时器
window.addEventListener('load', () =&gt; {
  clearInterval(timer);
});
</code></pre>
  </script>
</body>
</html>