js/css按钮点击触发彩色粒子爆炸特效

适用场景：活动页面、游戏化交互、点赞收藏按钮。

按钮样式：现代扁平化设计，带有悬停和点击反馈效果

html:

<div class="container">
        <h1>点击按钮查看粒子爆炸效果</h1>
        <button class="explosion-button">点击爆炸</button>
    </div>

css:

body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f0f0f0;
            margin: 0;
            font-family: Arial, sans-serif;
        }

        .container {
            text-align: center;
        }

        .explosion-button {
            padding: 15px 30px;
            font-size: 18px;
            background-color: #4285f4;
            color: white;
            border: none;
            border-radius: 50px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            transition: transform 0.3s, box-shadow 0.3s;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        }

        .explosion-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
        }

        .explosion-button:active {
            transform: translateY(1px);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
        }

        .particle {
            position: absolute;
            border-radius: 50%;
            pointer-events: none;
            z-index: 10;
        }

        h1 {
            margin-bottom: 40px;
            color: #333;
        }

js:

      document.addEventListener('DOMContentLoaded', function() {
            const button = document.querySelector('.explosion-button');
            
            button.addEventListener('click', function(e) {
                createExplosion(e.clientX, e.clientY);
                
                // 添加按钮点击反馈
                this.style.transform = 'scale(0.95)';
                setTimeout(() => {
                    this.style.transform = '';
                }, 150);
            });

            function createExplosion(x, y) {
                // 创建粒子数量
                const particleCount = 50;
                
                // 获取按钮位置用于相对定位
                const buttonRect = button.getBoundingClientRect();
                const offsetX = x - buttonRect.left;
                const offsetY = y - buttonRect.top;
                
                for (let i = 0; i < particleCount; i++) {
                    createParticle(offsetX, offsetY);
                }
            }

            function createParticle(x, y) {
                const particle = document.createElement('div');
                particle.className = 'particle';
                
                // 随机粒子大小
                const size = Math.random() * 10 + 5;
                particle.style.width = `${size}px`;
                particle.style.height = `${size}px`;
                
                // 随机颜色
                const colors = [
                    '#FF5252', '#FF4081', '#E040FB', '#7C4DFF', 
                    '#536DFE', '#448AFF', '#40C4FF', '#18FFFF', 
                    '#64FFDA', '#69F0AE', '#B2FF59', '#EEFF41', 
                    '#FFFF00', '#FFD740', '#FFAB40', '#FF6E40'
                ];
                particle.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
                
                // 设置初始位置
                particle.style.left = `${x}px`;
                particle.style.top = `${y}px`;
                
                // 随机方向和距离
                const angle = Math.random() * Math.PI * 2;
                const velocity = Math.random() * 15 + 5;
                const vx = Math.cos(angle) * velocity;
                const vy = Math.sin(angle) * velocity;
                
                // 随机旋转
                const rotation = Math.random() * 360;
                particle.style.transform = `rotate(${rotation}deg)`;
                
                // 添加到按钮中
                button.appendChild(particle);
                
                // 动画参数
                let posX = x;
                let posY = y;
                let opacity = 1;
                let scale = 1;
                
                // 动画函数
                function animate() {
                    // 更新位置
                    posX += vx;
                    posY += vy;
                    
                    // 更新透明度和缩放（模拟淡出效果）
                    opacity -= 0.02;
                    scale -= 0.01;
                    
                    // 应用变换
                    particle.style.left = `${posX}px`;
                    particle.style.top = `${posY}px`;
                    particle.style.opacity = opacity;
                    particle.style.transform = `rotate(${rotation}deg) scale(${scale})`;
                    
                    // 重力效果
                    // vy += 0.2;
                    
                    // 如果粒子还可见，继续动画
                    if (opacity > 0) {
                        requestAnimationFrame(animate);
                    } else {
                        // 移除粒子
                        particle.remove();
                    }
                }
                
                // 开始动画
                requestAnimationFrame(animate);
            }
        });