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

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

<!DOCTYPE html>
<html>
<head>
    <title>樱花动画</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #F9EBEA; /* 淡粉色背景 */
        }

        .sakura {
            position: absolute;
            height: 20px;
            width: 20px;
            background-color: #F8C471; /* 樱花颜色 */
            border-radius: 50%;
            pointer-events: none;
        }
    </style>
</head>
<body>
    <script>
        // 创建樱花动画
        function createSakura() {
            const sakura = document.createElement('div');
            sakura.className = 'sakura';
            sakura.style.top = '-20px';
            sakura.style.left = Math.random() * window.innerWidth + 'px';
            document.body.appendChild(sakura);

            // 鼠标经过时的排斥效果
            sakura.addEventListener('mouseover', function() {
                sakura.style.transform = 'scale(2)';
            });

            sakura.addEventListener('mouseout', function() {
                sakura.style.transform = 'scale(1)';
            });

            // 动画效果
            const animation = sakura.animate([
                { transform: 'translateY(0)' },
                { transform: 'translateY(' + window.innerHeight + 'px)' }
            ], {
                duration: Math.random() * 5000 + 2000, // 不同樱花的下落速度不同
                easing: 'linear',
                delay: Math.random() * 2000 // 不同樱花的延迟不同
            });

            animation.onfinish = function() {
                sakura.remove();
            };
        }

        // 创建多个樱花
        function createSakuras() {
            const numSakuras = 50; // 樱花的数量

            for (let i = 0; i < numSakuras; i++) {
                setTimeout(createSakura, Math.random() * 5000); // 每隔一段时间创建一个樱花
            }
        }

        createSakuras();
    </script>
</body>
</html>

在这个例子中，我们使用纯 HTML、CSS 和 JS 来创建一个淡粉色背景，并在背景上添加了多个樱花元素。每个樱花都有一个缓慢下落的动画效果，并且在鼠标经过时有排斥效果。

我们使用 CSS 设置了背景颜色和樱花的样式。樱花的样式包括圆形形状、颜色和禁用鼠标事件。

在 JS 代码中，我们创建了一个createSakura函数来生成单个樱花元素，并设置了鼠标经过时的排斥效果。然后，我们使用animate方法为每个樱花元素添加了一个缓慢下落的动画效果。最后，我们使用createSakuras函数创建了多个樱花元素，并设置了它们的延迟时间。

您可以将以上代码复制到一个 HTML 文件中，然后在浏览器中打开该文件，就可以看到淡粉色背景有樱花飘动缓慢下落动画且鼠标经过时有排斥效果的效果。