EffectHub.com: your best source for gaming

Recommendation

More Effects...

CSS

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绚丽烟花效果</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            background: #000;
            overflow: hidden;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            font-family: 'Arial', sans-serif;
        }
        
        canvas {
            display: block;
            background: linear-gradient(to bottom, #0c1445, #1a237e);
        }
        
        .container {
            position: relative;
            width: 100%;
            max-width: 800px;
        }
        
        .title {
            position: absolute;
            top: 20px;
            left: 0;
            width: 100%;
            text-align: center;
            color: #fff;
            font-size: 2.5rem;
            text-shadow: 0 0 10px #ff4081, 0 0 20px #ff4081;
            z-index: 10;
        }
        
        .controls {
            position: absolute;
            bottom: 20px;
            left: 0;
            width: 100%;
            display: flex;
            justify-content: center;
            gap: 15px;
            z-index: 10;
        }
        
        button {
            background: rgba(255, 255, 255, 0.2);
            border: none;
            color: white;
            padding: 10px 20px;
            border-radius: 20px;
            cursor: pointer;
            font-size: 1rem;
            transition: all 0.3s ease;
            backdrop-filter: blur(5px);
        }
        
        button:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: scale(1.05);
        }
        
        .info {
            position: absolute;
            top: 80px;
            left: 0;
            width: 100%;
            text-align: center;
            color: rgba(255, 255, 255, 0.7);
            font-size: 1rem;
            z-index: 10;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1 class="title">绚丽烟花秀</h1>
        <p class="info">点击屏幕任意位置发射烟花 | 自动模式已开启</p>
        <canvas id="fireworksCanvas"></canvas>
        <div class="controls">
            <button id="toggleAuto">暂停自动发射</button>
            <button id="clearAll">清除所有烟花</button>
            <button id="addFirework">发射一个烟花</button>
        </div>
    </div>

// 设置Canvas尺寸为窗口大小
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

// 烟花和粒子数组
        let fireworks = [];
        let particles = [];

// 自动发射状态
        let autoLaunch = true;

// 颜色数组
        const colors = [
            '#ff0000', '#ff8000', '#ffff00', '#00ff00', 
            '#00ffff', '#0080ff', '#8000ff', '#ff00ff'
        ];

// 鼠标位置
        let mouseX = canvas.width / 2;
        let mouseY = canvas.height / 2;

// 烟花类
        class Firework {
            constructor(x, y, targetX, targetY) {
                this.x = x;
                this.y = y;
                this.startX = x;
                this.startY = y;
                this.targetX = targetX;
                this.targetY = targetY;
                this.distance = Math.sqrt(Math.pow(targetX - x, 2) + Math.pow(targetY - y, 2));
                this.traveled = 0;
                this.speed = 5 + Math.random() * 5;
                this.angle = Math.atan2(targetY - y, targetX - x);
                this.hue = Math.floor(Math.random() * 360);
                this.brightness = Math.floor(Math.random() * 30) + 70;
                this.trail = [];
                this.trailLength = 5;
            }
            
            update() {
                // 更新位置
                this.x += Math.cos(this.angle) * this.speed;
                this.y += Math.sin(this.angle) * this.speed;
                
                // 记录轨迹
                this.trail.push({x: this.x, y: this.y});
                if (this.trail.length > this.trailLength) {
                    this.trail.shift();
                }
                
                // 计算已移动距离
                this.traveled = Math.sqrt(Math.pow(this.x - this.startX, 2) + Math.pow(this.y - this.startY, 2));
                
                // 检查是否到达目标
                if (this.traveled >= this.distance) {
                    this.explode();
                    return false;
                }
                return true;
            }
            
            explode() {
                // 爆炸时创建粒子
                const particleCount = 50 + Math.floor(Math.random() * 50);
                for (let i = 0; i < particleCount; i++) {
                    particles.push(new Particle(
                        this.x, 
                        this.y, 
                        this.hue, 
                        this.brightness
                    ));
                }
            }
            
            draw() {
                // 绘制轨迹
                for (let i = 0; i < this.trail.length; i++) {
                    const point = this.trail[i];
                    const alpha = i / this.trail.length;
                    const radius = 2 * alpha;
                    
                    ctx.beginPath();
                    ctx.arc(point.x, point.y, radius, 0, Math.PI * 2);
                    ctx.fillStyle = `hsla(${this.hue}, 100%, ${this.brightness}%, ${alpha})`;
                    ctx.fill();
                }
                
                // 绘制烟花主体
                ctx.beginPath();
                ctx.arc(this.x, this.y, 3, 0, Math.PI * 2);
                ctx.fillStyle = `hsl(${this.hue}, 100%, ${this.brightness}%)`;
                ctx.fill();
            }
        }

// 粒子类
        class Particle {
            constructor(x, y, hue, brightness) {
                this.x = x;
                this.y = y;
                this.hue = hue;
                this.brightness = brightness;
                this.angle = Math.random() * Math.PI * 2;
                this.speed = Math.random() * 5 + 1;
                this.friction = 0.95;
                this.gravity = 0.2;
                this.alpha = 1;
                this.decay = Math.random() * 0.015 + 0.005;
            }
            
            update() {
                // 更新位置
                this.speed *= this.friction;
                this.x += Math.cos(this.angle) * this.speed;
                this.y += Math.sin(this.angle) * this.speed + this.gravity;
                
                // 更新透明度
                this.alpha -= this.decay;
                
                return this.alpha > 0;
            }
            
            draw() {
                ctx.beginPath();
                ctx.arc(this.x, this.y, 2, 0, Math.PI * 2);
                ctx.fillStyle = `hsla(${this.hue}, 100%, ${this.brightness}%, ${this.alpha})`;
                ctx.fill();
            }
        }

// 创建烟花
        function createFirework(startX, startY, targetX, targetY) {
            fireworks.push(new Firework(startX, startY, targetX, targetY));
        }

// 自动发射烟花
        function autoLaunchFirework() {
            if (!autoLaunch) return;
            
            const startX = Math.random() * canvas.width;
            const startY = canvas.height;
            const targetX = Math.random() * canvas.width;
            const targetY = Math.random() * canvas.height * 0.6;
            
            createFirework(startX, startY, targetX, targetY);
        }

// 动画循环
        function animate() {
            // 清除画布，使用半透明黑色实现拖尾效果
            ctx.fillStyle = 'rgba(10, 20, 40, 0.2)';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            
            // 随机添加星星
            if (Math.random() < 0.1) {
                ctx.beginPath();
                ctx.arc(
                    Math.random() * canvas.width,
                    Math.random() * canvas.height * 0.7,
                    Math.random() * 1.5,
                    0,
                    Math.PI * 2
                );
                ctx.fillStyle = `rgba(255, 255, 255, ${Math.random() * 0.8 + 0.2})`;
                ctx.fill();
            }
            
            // 更新和绘制烟花
            for (let i = fireworks.length - 1; i >= 0; i--) {
                if (!fireworks[i].update()) {
                    fireworks.splice(i, 1);
                } else {
                    fireworks[i].draw();
                }
            }
            
            // 更新和绘制粒子
            for (let i = particles.length - 1; i >= 0; i--) {
                if (!particles[i].update()) {
                    particles.splice(i, 1);
                } else {
                    particles[i].draw();
                }
            }
            
            requestAnimationFrame(animate);
        }

// 事件监听
        canvas.addEventListener('click', (e) => {
            createFirework(canvas.width / 2, canvas.height, e.clientX, e.clientY);
        });

canvas.addEventListener('mousemove', (e) => {
            mouseX = e.clientX;
            mouseY = e.clientY;
        });

// 控制按钮事件
        document.getElementById('toggleAuto').addEventListener('click', function() {
            autoLaunch = !autoLaunch;
            this.textContent = autoLaunch ? '暂停自动发射' : '开始自动发射';
        });

document.getElementById('clearAll').addEventListener('click', function() {
            fireworks = [];
            particles = [];
        });

document.getElementById('addFirework').addEventListener('click', function() {
            createFirework(
                canvas.width / 2, 
                canvas.height, 
                Math.random() * canvas.width, 
                Math.random() * canvas.height * 0.6
            );
        });

// 窗口大小调整
        window.addEventListener('resize', function() {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        });

// 初始化
        function init() {
            // 创建初始烟花
            for (let i = 0; i < 3; i++) {
                setTimeout(() => {
                    autoLaunchFirework();
                }, i * 500);
            }
            
            // 开始自动发射
            setInterval(autoLaunchFirework, 1000);
            
            // 开始动画
            animate();
        }

// 启动
        init();
    </script>
</body>
</html>

HTML

A PHP Error was encountered

A PHP Error was encountered

Recommendation

A PHP Error was encountered

A PHP Error was encountered

Recommendation

Join Effecthub.com