程序员的另一种浪漫？简单HTML代码生成春节烟花，快去展示给爱的人吧

最新推荐文章于 2024-05-05 02:54:39 发布

小孟的报错日记

最新推荐文章于 2024-05-05 02:54:39 发布

阅读量780

点赞数 8

文章标签： html

本文链接：https://blog.csdn.net/xiaomeng1998_/article/details/136062146

版权

先上效果图

进入网页时会有少许绚丽的烟花。点击屏幕生成更加绚丽多彩的烟花

不想复制的已经打包放在下方链接，以供大家下载使用

https://download.csdn.net/download/xiaomeng1998_/88815753

不想下载的已经提供源码直接复制即可。

一、HTML部分

首先是html部分这里可以替换成自己想要的内容，比如爱人的名字

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>春节烟花庆祝</title>

</head>
<body>
   <div class="greetings">
        <h1>春节快乐！</h1>
        <h1>舒娜我爱你！</h1>
        <p>欢迎来到我们的烟花庆祝活动</p>
    </div>
    <canvas id="fireworksCanvas"></canvas>
</body>
</html>

二、CSS部分

直接拿来复制即可

<style>
    body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.greetings h1, .greetings p {
    z-index: 2;
    text-align: center;
}

/* 简单的动画效果增强视觉 */
.greetings h1 {
    animation: glow 1s ease-in-out infinite alternate;
}

.greetings p {
    animation: glow 2s ease-in-out infinite alternate;
}

@keyframes glow {
    from {
        text-shadow: 0 0 10px red, 0 0 20px red, 0 0 30px red, 0 0 40px red, 0 0 50px red, 0 0 60px red;
    }
    to {
        text-shadow: 0 0 20px yellow, 0 0 30px yellow, 0 0 40px yellow, 0 0 50px yellow, 0 0 60px yellow, 0 0 70px yellow;
    }
}

</style>

三、JavaScript部分

<script>
  document.addEventListener('DOMContentLoaded', function() {
    var canvas = document.getElementById('fireworksCanvas');
    var ctx = canvas.getContext('2d');

    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    function Particle(x, y, vx, vy, gravity) {
        this.x = x;
        this.y = y;
        this.vx = vx;
        this.vy = vy;
        this.gravity = gravity;
        this.alpha = 1;
        this.color = `hsla(${Math.random() * 360}, 100%, 50%, ${this.alpha})`;
    }

    Particle.prototype.update = function() {
        this.vy += this.gravity;
        this.x += this.vx;
        this.y += this.vy;
        this.alpha -= 0.015;
    };

    Particle.prototype.draw = function() {
        ctx.globalCompositeOperation = 'lighter';
        ctx.fillStyle = this.color;
        ctx.beginPath();
        ctx.arc(this.x, this.y, Math.random() * 3 + 1, 0, 2 * Math.PI);
        ctx.fill();
    };

    var particles = [];

    function spawnFireworks() {
        // 增加生成烟花的数量
        var count = Math.random() * 20 + 20; // 原来是 Math.random() * 10 + 10
        for (var i = 0; i < count; i++) {
            var particle = new Particle(canvas.width * Math.random(), canvas.height * Math.random(), Math.random() * 6 - 3, Math.random() * -3 - 1, 0.05);
            particles.push(particle);
        }
    }

    function explode(x, y) {
        // 增加每次点击产生烟花的粒子数
        var count = 100; // 原来是 100
        for (var i = 0; i < count; i++) {
            var vx = Math.random() * 5 - 2.5;
            var vy = Math.random() * 5 - 2.5;
            particles.push(new Particle(x, y, vx, vy, 0.04));
        }
    }

    function animate() {
        requestAnimationFrame(animate);
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        particles.forEach(function(particle, index) {
            particle.update();
            particle.draw();
            if (particle.alpha <= 0) {
                particles.splice(index, 1);
            }
        });
    }

    // 减小生成烟花的间隔时间，让烟花更频繁地出现
    setInterval(spawnFireworks, 500); // 原来是 1000

    canvas.addEventListener('click', function(e) {
        explode(e.clientX, e.clientY);
    });

    animate();
});


</script>

将其复制到网页编辑器即可

为了方便大家复制使用，全部使用的是js原生语法。

最后编写不易，如果那个人喜欢的话，记得多多点赞，多多收藏，感谢关注。