HTML樱花飘落动画：淡粉色背景、鼠标排斥效果

以下是一个示例的HTML代码，实现了一个淡粉色背景、樱花飘落动画和鼠标经过时的排斥效果：

<!DOCTYPE html>
<html>
<head>
  <title>樱花飘落动画</title>
  <style>
    body {
      background-color: #fceff6;
      overflow: hidden;
    }
    
    .sakura {
      position: absolute;
      top: -10px;
      background-image: url('sakura.png'); /* 樱花图像 */
      background-size: contain;
      width: 50px;
      height: 50px;
      opacity: 0;
    }
  </style>
</head>
<body>
  <script>
    document.addEventListener('DOMContentLoaded', function(event) {
      var container = document.body;
      var screenWidth = window.innerWidth;
      var screenHeight = window.innerHeight;
      
      function createSakura() {
        var sakura = document.createElement('div');
        sakura.className = 'sakura';
        sakura.style.left = Math.random() * screenWidth + 'px';
        container.appendChild(sakura);
        
        // 樱花飘落动画
        var animation = sakura.animate([
          { top: '-10px', opacity: 0 },
          { top: screenHeight + 'px', opacity: 1 }
        ], {
          duration: Math.random() * 3000 + 2000, // 随机持续时间
          easing: 'linear',
          delay: Math.random() * 2000 // 随机延迟
        });
        
        // 樱花飘落结束后移除元素
        animation.onfinish = function() {
          sakura.remove();
        };
      }
      
      // 创建樱花
      setInterval(createSakura, 200); // 每200毫秒创建一朵樱花
      
      // 鼠标经过时的排斥效果
      container.addEventListener('mousemove', function(event) {
        var x = event.clientX;
        var y = event.clientY;
        
        var sakuras = document.getElementsByClassName('sakura');
        for (var i = 0; i < sakuras.length; i++) {
          var sakura = sakuras[i];
          var sakuraX = sakura.offsetLeft + sakura.offsetWidth / 2;
          var sakuraY = sakura.offsetTop + sakura.offsetHeight / 2;
          
          var dx = x - sakuraX;
          var dy = y - sakuraY;
          var distance = Math.sqrt(dx * dx + dy * dy);
          
          if (distance < 100) { // 鼠标与樱花的距离小于100时
            sakura.style.opacity = 0;
          } else {
            sakura.style.opacity = 1;
          }
        }
      });
    });
  </script>
</body>
</html>

请注意，上述示例中使用了一个名为sakura.png的樱花图像作为背景图像。你需要将其替换为你自己的樱花图像，并将其放置在与HTML文件相同的目录中。此外，你还可以根据需要调整樱花的大小、颜色和飘落效果等。