鼠标点击滑动特效鼠标点击滑动特效![image.png](tos-cn-i-73owjymdk6/e2d86c1be53

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>炫酷鼠标动画</title>
    <style>
        /* 基础样式 */
        body {
            margin: 0;
            overflow: hidden;
            background-color: #a1a0a0;
            cursor: crosshair;
        }

        /* 烟花粒子样式 */
        .firework {
            position: absolute;
            width: 5px;
            height: 5px;
            border-radius: 50%;
            pointer-events: none;
        }

        /* 掉落粒子样式 */
        .drop {
            position: absolute;
            width: 5px;
            height: 5px;
            border-radius: 50%;
            pointer-events: none;
            opacity: 0.8;
        }
    </style>
</head>
<body>

    <script>
        // 生成随机颜色
        function getRandomColor() {
            const letters = '0123456789ABCDEF';
            let color = '#';
            for (let i = 0; i < 6; i++) {
                color += letters[Math.floor(Math.random() * 16)];
            }
            return color;
        }

        // 鼠标点击烟花效果
        document.addEventListener('click', function (e) {
            const x = e.pageX;
            const y = e.pageY;
            for (let i = 0; i < 30; i++) {
                createFireworkParticle(x, y);
            }
        });

        function createFireworkParticle(originX, originY) {
            const particle = document.createElement('div');
            particle.className = 'firework';
            document.body.appendChild(particle);

            const angle = Math.random() * 360;
            const speed = Math.random() * 4 + 2;
            const dx = Math.cos(angle) * speed;
            const dy = Math.sin(angle) * speed;

            let x = originX;
            let y = originY;
            let opacity = 1;

            // 计算粒子到鼠标的距离，距离越小粒子越大
            const distance = Math.sqrt(dx * dx + dy * dy);
            const maxDistance = 10; // 调整后的最大距离，用于缩放大小
            const size = Math.max(3, (maxDistance - distance) * 1.2); // 调整粒子的大小
            particle.style.width = `${size}px`;
            particle.style.height = `${size}px`;
            particle.style.backgroundColor = getRandomColor();  // 设置随机颜色

            const interval = setInterval(function () {
                x += dx;
                y += dy;
                opacity -= 0.02;
                particle.style.left = `${x}px`;
                particle.style.top = `${y}px`;
                particle.style.opacity = opacity;

                if (opacity <= 0) {
                    clearInterval(interval);
                    particle.remove();
                }
            }, 16);
        }

        // 鼠标移动掉落效果
        document.addEventListener('mousemove', function (e) {
            const x = e.pageX;
            const y = e.pageY;
            createDropParticle(x, y);
        });

        function createDropParticle(x, y) {
            const drop = document.createElement('div');
            drop.className = 'drop';
            document.body.appendChild(drop);

            let opacity = 1;
            const speed = Math.random() * 3 + 2;
            drop.style.backgroundColor = getRandomColor();  // 设置随机颜色

            const interval = setInterval(function () {
                y += speed;
                opacity -= 0.02;
                drop.style.left = `${x}px`;
                drop.style.top = `${y}px`;
                drop.style.opacity = opacity;

                if (opacity <= 0) {
                    clearInterval(interval);
                    drop.remove();
                }
            }, 16);
        }
    </script>
</body>
</html>