HTML实现除夕最美烟花，2023春节倒计时，新年不可没有烟花，最炫烟花代码分享

以下是一个简单的HTML页面示例，用于展示除夕夜最美的烟花。




<!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, html {
            margin: 0;
            padding: 0;
            height: 100%;
        }
        .background-video {
            position: fixed;
            right: 0;
            bottom: 0;
            min-width: 100%;
            min-height: 100%;
            width: auto;
            height: auto;
            z-index: -1;
        }
        .fireworks {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            pointer-events: none;
            z-index: 1000;
        }
    </style>
</head>
<body>
    <video autoplay loop muted playsinline class="background-video">
        <source src="background-video.mp4" type="video/mp4">
    </video>
    <canvas class="fireworks"></canvas>
 
    <script>
        // 烟花绘制逻辑
        const canvas = document.querySelector('.fireworks');
        const ctx = canvas.getContext('2d');
        const mousedown = false;
        let particles = [];
 
        function Firework() {
            this.x = canvas.width / 2;
            this.y = canvas.height;
            this.vx = Math.random() * 5 - 2.5;
            this.vy = -15;
            this.radius = Math.random() * 2 + 1;
            this.color = 'hsl(' + 360 * Math.random() + ', 100%, 50%)';
            this.endY = Math.random() * canvas.height * 0.3 + canvas.height * 0.4;
            this.exploded = false;
        }
 
        Firework.prototype.update = function() {
            if (!this.exploded) {
                this.x += this.vx;
                this.y += this.vy;
                this.vy += 0.3;
                if (this.y >= this.endY) {
                    this.exploded = true;
                    this.explode();
                }
            }
        };
 
        Firework.prototype.draw = function() {
            ctx.beginPath();
            ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
            ctx.fillStyle = this.color;
            ctx.fill();
        };
 
        Firework.prototype.explode = function() {
            for (let i = 0; i < 20; i++) {
                particles.push(new Particle(this.x, this.y, this.

HTML实现除夕最美烟花，2023春节倒计时，新年不可没有烟花，最炫烟花代码分享

评论已关闭

推荐阅读