绚丽烟花--动态

最新推荐文章于 2025-05-11 11:26:37 发布

smile boy

最新推荐文章于 2025-05-11 11:26:37 发布

阅读量127

点赞数 1

分类专栏： HTML5+CSS+JavaScript 文章标签： css 前端 html

本文链接：https://blog.csdn.net/weixin_47004687/article/details/147366049

版权

HTML5+CSS+JavaScript 专栏收录该内容

18 篇文章

订阅专栏

1.基础样式设置：

黑色背景模拟夜空

隐藏滚动条保持全屏效果

十字准星光标增强交互感

2.霓虹标题设计：

使用多层text-shadow创建发光效果

应用渐变动画使文字呼吸闪烁

固定定位确保始终可见

3.粒子系统：

每个烟花由100个粒子组成

使用HSL色彩模式实现全色域随机颜色

粒子具有随机运动方向和重力模拟

4.双发射模式：

自动模式：每1.5秒随机位置发射

点击模式：鼠标点击位置精准发射

5.性能优化：

透明粒子自动回收

使用requestAnimationFrame优化动画

拖尾效果通过半透明背景实现

6.视觉增强：

粒子透明度渐变实现自然消失

重力模拟真实物理运动

随机颜色保证每次绽放都不同

7.截图展示：

8.代码重现：

<!DOCTYPE html>
<html>
<head>
    <title>绚烂烟花秀</title>
    <style>
        /* 1. 页面基础样式 */
        body {
            margin: 0;
            overflow: hidden; /* 隐藏滚动条 */
            background: #000; /* 黑色背景模拟夜空 */
            cursor: crosshair; /* 十字准星光标 */
        }

        /* 2. 标题样式 */
        .title {
            position: fixed;
            top: 20px;
            width: 100%;
            text-align: center;
            color: #fff;
            font-family: 'Arial Black', sans-serif;
            font-size: 3em;
            text-shadow: 0 0 10px #fff,
                         0 0 20px #ff00de,
                         0 0 30px #ff00de; /* 霓虹光晕效果 */
            animation: glow 2s ease-in-out infinite alternate;
            z-index: 100;
        }

        /* 3. 标题发光动画 */
        @keyframes glow {
            from {
                text-shadow: 0 0 10px #fff,
                             0 0 20px #ff00de,
                             0 0 30px #ff00de;
            }
            to {
                text-shadow: 0 0 20px #fff,
                             0 0 30px #ff00de,
                             0 0 40px #ff00de;
            }
        }
    </style>
</head>
<body>
    <h1 class="title">Fantastic Fireworks</h1>
    <canvas id="canvas"></canvas>

    <script>
        // 4. 初始化画布
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        // 5. 烟花粒子类
        class Particle {
            constructor(x, y, color) {
                this.x = x;
                this.y = y;
                this.color = color;
                this.radius = 2; // 粒子半径
                this.velocity = {
                    x: (Math.random() - 0.5) * 8, // 随机水平速度
                    y: (Math.random() - 0.5) * 8  // 随机垂直速度
                };
                this.alpha = 1; // 透明度（用于渐隐效果）
            }

            draw() {
                ctx.save();
                ctx.globalAlpha = this.alpha;
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
                ctx.fillStyle = this.color;
                ctx.fill();
                ctx.restore();
            }

            update() {
                this.x += this.velocity.x;
                this.y += this.velocity.y;
                this.velocity.y += 0.05; // 模拟重力
                this.alpha -= 0.008; // 逐渐消失
                this.draw();
            }
        }

        // 6. 烟花发射器类
        class Firework {
            constructor(x, y) {
                this.particles = [];
                this.color = `hsl(${Math.random() * 360}, 100%, 50%)`; // 随机鲜艳颜色
                
                // 创建爆炸粒子
                for (let i = 0; i < 100; i++) {
                    this.particles.push(new Particle(x, y, this.color));
                }
            }

            update() {
                this.particles.forEach((particle, index) => {
                    if (particle.alpha <= 0) {
                        this.particles.splice(index, 1); // 移除完全透明的粒子
                    } else {
                        particle.update();
                    }
                });
            }
        }

        // 7. 烟花管理
        const fireworks = [];

        // 8. 自动发射烟花
        setInterval(() => {
            const x = Math.random() * canvas.width;
            const y = Math.random() * canvas.height/2;
            fireworks.push(new Firework(x, y));
        }, 1500); // 每1.5秒自动发射

        // 9. 鼠标点击发射
        canvas.addEventListener('click', (e) => {
            fireworks.push(new Firework(e.clientX, e.clientY));
        });

        // 10. 动画循环
        function animate() {
            ctx.fillStyle = 'rgba(0, 0, 0, 0.1)'; // 透明背景产生拖尾效果
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            
            fireworks.forEach((firework, index) => {
                if (firework.particles.length === 0) {
                    fireworks.splice(index, 1); // 移除空烟花
                } else {
                    firework.update();
                }
            });
            
            requestAnimationFrame(animate);
        }

        animate();

        // 11. 窗口大小调整处理
        window.addEventListener('resize', () => {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        });
    </script>
</body>
</html>