HTML+CSS+JS实现淡粉色樱花飘落动画，鼠标经过有排斥效果

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      margin: 0;
      padding: 0;
      overflow: hidden;
    }
<pre><code>#background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #FFD9E5;
  z-index: -1;
}

.sakura {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: #FF1493;
  border-radius: 50%;
  pointer-events: none;
}
</code></pre>
  </style>
</head>
<body>
  <div id='background'></div>
  <script>
    function createSakura() {
      const sakura = document.createElement('div');
      sakura.className = 'sakura';
      sakura.style.left = Math.random() * 100 + 'vw';
      sakura.style.animationDuration = Math.random() * 5 + 5 + 's';
      document.body.appendChild(sakura);
      
      setTimeout(() => {
        sakura.remove();
      }, 10000);
    }
    
    function init() {
      for (let i = 0; i < 30; i++) {
        setTimeout(createSakura, Math.random() * 5000);
      }
    }
    
    init();
    
    document.addEventListener('mousemove', (e) => {
      const sakuras = document.getElementsByClassName('sakura');
      for (let i = 0; i < sakuras.length; i++) {
        const sakura = sakuras[i];
        const x = e.clientX - sakura.offsetLeft;
        const y = e.clientY - sakura.offsetTop;
        const dist = Math.sqrt(x * x + y * y);
        const maxDist = Math.max(window.innerWidth, window.innerHeight) / 2;
        const scale = 1 - dist / maxDist;
        
        sakura.style.transform = `scale(${scale})`;
      }
    });
  </script>
</body>
</html>