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

以下是一个使用纯 HTML、CSS 和 JS 实现淡粉色背景有樱花飘落动画且鼠标经过时有排斥效果的例子：

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #FDEFF2;
        }
        
        .flower {
            position: absolute;
            width: 20px;
            height: 20px;
            background-color: #FFC0CB;
            border-radius: 50%;
            pointer-events: none;
            z-index: 9999;
        }
    </style>
</head>
<body>
    <script>
        function createFlower() {
            const flower = document.createElement('div');
            flower.className = 'flower';
            flower.style.left = Math.random() * window.innerWidth + 'px';
            document.body.appendChild(flower);
            
            setTimeout(() => {
                flower.remove();
            }, 5000);
        }
        
        function moveFlowers(event) {
            const flowers = document.getElementsByClassName('flower');
            for (let i = 0; i < flowers.length; i++) {
                const flower = flowers[i];
                const x = flower.offsetLeft;
                const y = flower.offsetTop;
                const dx = x - event.clientX;
                const dy = y - event.clientY;
                const dist = Math.sqrt(dx * dx + dy * dy);
                
                if (dist < 100) {
                    flower.style.transition = 'transform 0.3s';
                    flower.style.transform = 'scale(1.5)';
                } else {
                    flower.style.transition = 'transform 0.3s';
                    flower.style.transform = 'scale(1)';
                }
            }
        }
        
        setInterval(createFlower, 300);
        document.addEventListener('mousemove', moveFlowers);
    </script>
</body>
</html>

在这个例子中，我们使用了 CSS 来定义背景颜色和花朵的样式。在 JavaScript 中，我们创建了一个函数 createFlower 来动态创建花朵元素，并设置了一个定时器来在每 300 毫秒创建一个新的花朵。每个花朵都有一个随机的水平位置，然后在 5 秒后被移除。

我们还创建了一个 moveFlowers 函数来处理鼠标移动事件。对于每个花朵，我们计算鼠标位置与花朵位置之间的距离，并根据距离的大小来设置花朵的缩放效果。如果鼠标与花朵的距离小于 100 像素，则花朵会放大，否则会恢复原始大小。

最后，我们使用 setInterval 函数来定时调用 createFlower 函数，并使用 document.addEventListener 函数来监听鼠标移动事件，并调用 moveFlowers 函数来处理事件。

这样，我们就实现了一个淡粉色背景有樱花飘落动画且鼠标经过时有排斥效果的 HTML 页面。