烟花代码,予心上人最璀璨烟花—— 附源码与成品（HTML+CSS+JS）

已于 2022-03-02 16:43:17 修改
阅读量4w 收藏 436
点赞数 190
分类专栏： 前端开发 # HTML+CSS # JavaScript 文章标签： html css javascript
于 2022-01-31 16:20:37 首次发布
本文为博主原创文章，遵循 【CC BY-NC-ND 4.0】 版权协议，转载请附上原文出处链接和作者及本声明。
本文链接：https://blog.csdn.net/qq_41103843/article/details/122757901
版权
前端开发 同时被 3 个专栏收录
35 篇文章 37 订阅
订阅专栏
HTML+CSS
6 篇文章 15 订阅
订阅专栏
JavaScript
4 篇文章 7 订阅
订阅专栏

🏮时逢岁末，暮雪千山，万家灯火，流年偷换。虎年🐅除夕之夜，愿你清零过往，除去烦恼，迎接希望，新年可期！ 🎉🎉


新年大家都在用代码实现对联、礼花、画虎，我保证，这将是你见过最炫的🎇烟花代码！😎


目录



✨成品演示✨

先看效果 🎉


效果演示

如果没有显示，可能是内容较大，请等待一下



🖥️具体实现 🖥️

篇幅有限,具体更多代码请将 成品下载 章节

结构

在这里插入图片描述



index.html

访问的主页面

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>新年烟花</title>
        <link rel="icon" type="image/x-icon" href="/favicon.ico">
        <link rel="stylesheet" href="static/css/style.css">
    </head>

    <body onselectstart="return false">
        <!-- 消息提示 -->
        <div class="message">
            <p>请单击屏幕开启背景音乐</p>
        </div>
        <!-- 流星与星火 -->
        <div id="backgroundRendering" style="z-index: 0;"></div>

        <!--烟花-->
        <canvas id="fireworks" style="z-index: 9999;">
            您的浏览器不支持canvas标签。
        </canvas>

        <!-- 背景音乐 -->
        <audio id="bgm" src="static/mp3/bgm.mp3" loop autoplay>
            您的浏览器不支持 audio 标签。
        </audio>

        <!-- 自定义内容弹窗 -->
        <div style="display: none">
            <div class="shape">🏮2022新年快乐🏮</div>
            <div class="shape">🏮恭喜发财🏮</div>
            <div class="shape">🏮万事如意🏮</div>
            <div class="shape">🏮吉庆有余🏮</div>
            <div class="shape">🏮心想事成🏮</div>
            <div class="shape">🏮喜气盈门🏮</div>
            <div class="shape">🏮阖家欢乐🏮</div>
            <div class="shape">🏮财源广进🏮</div>
        </div>

        <script src="static/js/main.js"></script>
    </body>

</html>


style.css

全局样式的管理

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: #161929;
    position: relative;
    overflow: hidden;
    user-select: none;
}

audio {
    opacity: 0;
}

.message {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    width: 160px;
    background-color: rgba(0, 0, 0, 0.52);
    padding: 0px 17px;
    top: 25px;
    border-radius: 6px;
    overflow: hidden;
    z-index: 1000;
    opacity: 0;
}

/* 消息提示框内容样式 */
.message p {
    line-height: 1;
    font-size:14px;
    color: #ffffff;
}

.spark {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    position: absolute;
    background-color: rgba(231, 200, 160, 0.8);
    box-shadow: 0 0 40px 0 rgba(231, 200, 160, 0.8);
    animation: glow 5s infinite;
}

.medium-spark {
    width: 7px;
    height: 7px;
}

.big-spark {
    width: 10px;
    height: 10px;
    box-shadow: 0 0 40px 0 #e9c9a0, 0 0 20px 0 #FFFFFF, inset 0 0 4px #FFFFFF;
}

.meteor {
    width: 6px;
    height: 6px;
    background-color: rgba(255, 255, 255, 0.6);
    box-shadow: 0 0 40px 0 #e9c9a0, 0 0 20px 0 #FFFFFF, inset 0 0 8px rgba(255, 255, 255, 0.6);
    top: 0;
    left: 80%;
    opacity: 0.3;
    transform: rotate(-45deg) translate(0, -50px);
    animation: meteor 7s infinite;
}

.meteor:after {
    content: '';
    width: 20vw;
    height: 6px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 20px rgba(231, 200, 160, 0.4);
    position: absolute;
    top: 0;
    left: 0;
}

@keyframes glow {
    0% {
        opacity: 0.9;
    }

    50% {
        opacity: 0.2;
    }

    100% {
        opacity: 0.9;
    }
}

@keyframes meteor {
    0% {
        transform: rotate(-45deg) translateX(0);
        opacity: 0.3;
    }

    10% {
        opacity: 1;
    }

    20% {
        transform: rotate(-45deg) translateX(-100vw);
        opacity: 0;
    }

    100% {
        transform: rotate(-45deg) translateX(-100vw);
        opacity: 0;
    }
}


main.js

核心功能的实现

// 初始化内容
var wH = window.innerHeight;
var wW = window.innerWidth;
let backgroundRendering = document.getElementById("backgroundRendering");
var generateStars = function generateStars(f) {
    for (var e = 0; e < f; e++) {
        var single = document.createElement("div");
        single.className = e % 20 == 0 ? "spark big-spark" : e % 9 == 0 ? "spark medium-spark" : "star";
        single.setAttribute("style", "top:" + Math.round(Math.random() * wH) + "px;left:" + Math.round(Math.random() * wW) + "px;animation-duration:" + (Math.round(Math.random() * 3000) + 3000) + "ms;animation-delay:" + Math.round(Math.random() * 3000) + "ms;");
        backgroundRendering.appendChild(single);
    }
};
generateStars(getRandom(140,240));


// 全局变量 提供内容/对象存储
let fireworksCanvas = document.getElementById("fireworks");
let currentFireworks = document.createElement("canvas");
let currentObject = currentFireworks.getContext("2d");
let fireworksObject = fireworksCanvas.getContext("2d");

currentFireworks.width = fireworksCanvas.width = window.innerWidth;
currentFireworks.height = fireworksCanvas.height = window.innerHeight;
let fireworksExplosion = [];
let autoPlayFlag = false;

// 自动加载烟花动画
window.onload = function () {
    drawFireworks();
    lastTime = new Date();
    animationEffect();
    // 背景音乐
    let audio = document.getElementById('bgm');
    document.querySelector("body").onclick = function () {
        if (!autoPlayFlag) {
            audio.play();
            autoPlayFlag = true;
        }
    }
    for (let i = 0; i <= 10; i++){
        setTimeout(function () {
            document.querySelector("body > div.message").style.opacity = i/10;
        },i*60+2000)
    };
    for (let i = 0; i <= 10; i++){
        setTimeout(function () {
            document.querySelector("body > div.message").style.opacity = 1 - i/10;
        },i*60+8000)
    };
};

let lastTime;


// 烟花动画效果
function animationEffect() {
    fireworksObject.save();
    fireworksObject.fillStyle = "rgba(0,5,25,0.1)";
    fireworksObject.fillRect(0, 0, fireworksCanvas.width, fireworksCanvas.height);
    fireworksObject.restore();
    let newTime = new Date();
    if (newTime - lastTime > getRandom(10,1600) + (window.innerHeight - 767) / 2) {
        let random = Math.random() * 100 > 15;
        let x = getRandom(0, (fireworksCanvas.width));
        let y = getRandom(0,400);
        if (random) {
            let bigExplode = new explode(
                getRandom(0, fireworksCanvas.width),
                getRandom(1, 3),
                "#FFF",
                {
                    x: x,
                    y: y,
                }
            );
            fireworksExplosion.push(bigExplode);

        } else {
            let x = getRandom(fireworksCanvas.width/2-300, fireworksCanvas.width/2+300);
            let y = getRandom(0, 350);
            let bigExplode = new explode(
                getRandom(0, fireworksCanvas.width),
                getRandom(1, 3),
                "#FFF",
                {
                    x: x,
                    y: y,
                },
                document.querySelectorAll(".shape")[
                    parseInt(getRandom(0, document.querySelectorAll(".shape").length))
                    ]
            );
            fireworksExplosion.push(bigExplode);
        }
        lastTime = newTime;
    }
    sparks.foreach(function () {
        this.paint();
    });
    fireworksExplosion.foreach(function () {
        let that = this;
        if (!this.dead) {
            this._move();
            this._drawLight();
        } else {
            this.explodes.foreach(function (index) {
                if (!this.dead) {
                    this.moveTo();
                } else {
                    if (index === that.explodes.length - 1) {
                        fireworksExplosion[fireworksExplosion.indexOf(that)] = null;
                    }
                }
            });
        }
    });
    setTimeout(animationEffect, 16);
}

Array.prototype.foreach = function (callback) {
    for (let i = 0; i < this.length; i++) {
        if (this[i] !== null) {
            callback.apply(this[i], [i]);
        }
    }
};

fireworksCanvas.onclick = function (evt) {
    let x = evt.clientX;
    let y = evt.clientY;
    let explode = new explode(
        getRandom(fireworksCanvas.width / 3, (fireworksCanvas.width * 2) / 3),
        2,
        "#FFF",
        {
            x: x,
            y: y,
        }
    );
    fireworksExplosion.push(explode);
};

let explode = function (x, r, c, explodeArea, shape) {
    this.explodes = [];
    this.x = x;
    this.y = fireworksCanvas.height + r;
    this.r = r;
    this.c = c;
    this.shape = shape || false;
    this.explodeArea = explodeArea;
    this.dead = false;
    this.ba = parseInt(getRandom(80, 200));
};
explode.prototype = {
    _paint: function () {
        fireworksObject.save();
        fireworksObject.beginPath();
        fireworksObject.arc(this.x, this.y, this.r, 0, 2 * Math.PI);
        fireworksObject.fillStyle = this.c;
        fireworksObject.fill();
        fireworksObject.restore();
    },
    _move: function () {
        let dx = this.explodeArea.x - this.x,
            dy = this.explodeArea.y - this.y;
        this.x = this.x + dx * 0.01;
        this.y = this.y + dy * 0.01;
        if (Math.abs(dx) <= this.ba && Math.abs(dy) <= this.ba) {
            if (this.shape) {
                this._shapeExplode();
            } else {
                this._explode();
            }
            this.dead = true;
        } else {
            this._paint();
        }
    },
    _drawLight: function () {
        fireworksObject.save();
        fireworksObject.fillStyle = "rgba(255,228,150,0.3)";
        fireworksObject.beginPath();
        fireworksObject.arc(this.x, this.y, this.r + 3 * Math.random() + 1, 0, 2 * Math.PI);
        fireworksObject.fill();
        fireworksObject.restore();
    },
    _explode: function () {
        let embellishmentNum = getRandom(30, 200);
        let style = getRandom(0, 10) >= 5 ? 1 : 2;
        let color;
        if (style === 1) {
            color = {
                a: parseInt(getRandom(128, 255)),
                b: parseInt(getRandom(128, 255)),
                c: parseInt(getRandom(128, 255)),
            };
        }
        let fullRange = parseInt(getRandom(300, 400));
        for (let i = 0; i < embellishmentNum; i++) {
            if (style === 2) {
                color = {
                    a: parseInt(getRandom(128, 255)),
                    b: parseInt(getRandom(128, 255)),
                    c: parseInt(getRandom(128, 255)),
                };
            }
            let a = getRandom(-Math.PI, Math.PI);
            let x = getRandom(0, fullRange) * Math.cos(a) + this.x;
            let y = getRandom(0, fullRange) * Math.sin(a) + this.y;
            let radius = getRandom(0, 2);
            let embellishment = new newEmbellishment(this.x, this.y, radius, color, x, y);
            this.explodes.push(embellishment);
        }
    },
    _shapeExplode: function () {
        let that = this;
        putValue(currentFireworks, currentObject, this.shape, 5, function (dots) {
            let dx = fireworksCanvas.width / 2 - that.x;
            let dy = fireworksCanvas.height / 2 - that.y;
            let color;
            for (let i = 0; i < dots.length; i++) {
                color = {
                    a: dots[i].a,
                    b: dots[i].b,
                    c: dots[i].c,
                };
                let x = dots[i].x;
                let y = dots[i].y;
                let radius = 1;
                let embellishment = new newEmbellishment(that.x, that.y, radius, color, x - dx, y - dy);
                that.explodes.push(embellishment);
            }
        });
    },
};

function putValue(fireworks, context, ele, dr, callback) {
    context.clearRect(0, 0, fireworksCanvas.width, fireworksCanvas.height);
    let img = new Image();
    let dots;
    if (ele.innerHTML.indexOf("img") >= 0) {
        img.src = ele.getElementsByTagName("img")[0].src;
        implode(img, function () {
            context.drawImage(
                img,
                fireworksCanvas.width / 2 - img.width / 2,
                fireworksCanvas.height / 2 - img.width / 2
            );
            let dots = gettingData(fireworks, context, dr);
            callback(dots);
        });
    } else {
        let text = ele.innerHTML;
        context.save();
        let fontSize = getRandom(3,11);
        context.font = fontSize + "vw 宋体 bold";
        context.textAlign = "center";
        context.textBaseline = "middle";
        context.fillStyle =
            "rgba(" +
            parseInt(getRandom(128, 255)) +
            "," +
            parseInt(getRandom(128, 255)) +
            "," +
            parseInt(getRandom(128, 255)) +
            " , 1)";
        context.fillText(text, fireworksCanvas.width / 2, fireworksCanvas.height / 2);
        context.restore();
        dots = gettingData(fireworks, context, dr);
        callback(dots);
    }
}

function implode(img, callback) {
    if (img.complete) {
        callback.call(img);
    } else {
        img.onload = function () {
            callback.call(this);
        };
    }
}

function gettingData(fireworks, context, dr) {
    let imgData = context.getImageData(0, 0, fireworksCanvas.width, fireworksCanvas.height);
    context.clearRect(0, 0, fireworksCanvas.width, fireworksCanvas.height);
    let dots = [];
    for (let x = 0; x < imgData.width; x += dr) {
        for (let y = 0; y < imgData.height; y += dr) {
            let i = (y * imgData.width + x) * 4;
            if (imgData.data[i + 3] > 128) {
                let dot = {
                    x: x,
                    y: y,
                    a: imgData.data[i],
                    b: imgData.data[i + 1],
                    c: imgData.data[i + 2],
                };
                dots.push(dot);
            }
        }
    }
    return dots;
}

function getRandom(a, b) {
    return Math.random() * (b - a) + a;
}

let maxRadius = 1,
    sparks = [];

function drawFireworks() {
    for (let i = 0; i < 100; i++) {
        let spark = new newSpark();
        sparks.push(spark);
        spark.paint();
    }
}

// 新建星火位置
let newSpark = function () {
    this.x = Math.random() * fireworksCanvas.width;

    this.y = Math.random() * 2 * fireworksCanvas.height - fireworksCanvas.height;

    this.r = Math.random() * maxRadius;

};

newSpark.prototype = {
    paint: function () {
        fireworksObject.save();
        fireworksObject.beginPath();
        fireworksObject.arc(this.x, this.y, this.r, 0, 2 * Math.PI);
        fireworksObject.fillStyle = "rgba(255,255,255," + this.r + ")";
        fireworksObject.fill();
        fireworksObject.restore();
    },
};
// 烟花点缀生成
let newEmbellishment = function (centerX, centerY, radius, color, tx, ty) {
    this.tx = tx;
    this.ty = ty;
    this.x = centerX;
    this.y = centerY;
    this.dead = false;
    this.radius = radius;
    this.color = color;
};
newEmbellishment.prototype = {
    paint: function () {
        fireworksObject.save();
        fireworksObject.beginPath();
        fireworksObject.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
        fireworksObject.fillStyle =
            "rgba(" + this.color.a + "," + this.color.b + "," + this.color.c + ",1)";
        fireworksObject.fill();
        fireworksObject.restore();
    },
    moveTo: function () {
        this.ty = this.ty + 0.3;
        let dx = this.tx - this.x,
            dy = this.ty - this.y;
        this.x = Math.abs(dx) < 0.1 ? this.tx : this.x + dx * 0.1;
        this.y = Math.abs(dy) < 0.1 ? this.ty : this.y + dy * 0.1;
        if (dx === 0 && Math.abs(dy) <= 80) {
            this.dead = true;
        }
        this.paint();
    },
};



👑成品下载 👑

项目已经部署好了,并且代码已经上传到GitCode上了,可以直接使用和自定义

快速访问👉 新年烟花🎉

成品下载 👉 代码仓库📦



在这里插入图片描述

如果对您有帮助，可别忘了 点赞/收藏/评论/关注 支持下博主
我想养只猫 •͓͡•ʔ
关注
  • 190
    点赞
  • 踩
  • 436
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 71
    评论
专栏目录
情人节程序员用HTML网页表白【烟花代码】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript
08-10
HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞 蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、游戏、 节日、 戒烟、 电影、 摄影、 文化、 家 乡、 鲜花、 礼品、 汽车、 其他 可满足大学生网页大作业网页设计作业需求, 喜欢的可以下载! 原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、Sublime 、 Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作） HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部 区域背景色为100%宽度。都是给学生定制的都符合学生考试期末作业的水平,有的有js，有的视频+音乐+flash的等 元素的插入。 【查看更多源码地址】：https://blog.csdn.net/VX_WJ88950106?type=blog
烟花源代码
06-24
烟花的源代码电子书说明，里面包含了烟花代码的源代码，浪漫烟花。JAVA烟花源代码
烟花代码,予心上人最璀璨烟花—— 附源码与成品（HTML+CSS+JS
2401_84447262的博客
05-03 1137
整理面试题，不是让大家去只刷面试题，而是熟悉目前实际面试中常见的考察方式和知识点，做到心中有数，也可以用来自查及完善知识体系。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】《前端基础面试题》，《前端校招面试题精编解析大全》，《前端面试题宝典》，《前端面试题：常用算法》dth / 2,});} else {context.font = fontSize + “vw 宋体 bold”;“rgba(” +
python code自留地（1）
Arican_的博客
02-18 1377
简易的代码，大家可以随意修改，望增添更多色彩。 将你的“墩”整活起来。 import turtle turtle.title("BingDwenDwen") # 速度 turtle.speed(100) # 左手 turtle.penup() turtle.goto(177, 112) turtle.pencolor("lightgray") turtle.pensize(3) turtle.fillcolor("white") turtle.begin_fill() turtle.pe.
3个烟花代码，我已上传，也可复制代码
热门推荐
分享编程技术，让编程的世界没有孤岛。
06-07 10万+
这烟花好看吗 ？源码如下
Web前端:html烟花代码
SupermarketX的博客
05-18 1万+
该代码内含文字,文字内容可自由发挥,找到代码中这一行,修改内容即可。
❤️创意网页：HTML5 Canvas技术实现绚丽多彩的烟花特效教程
VLOKL的博客
07-19 4073
❤️创意网页：HTML5 Canvas技术实现绚丽多彩的烟花特效教程
除夕最炫烟花代码——基于HTML+JS+CSS
02-13
《除夕最炫烟花代码——基于HTML+JS+CSS》 在网页设计中，HTML、JavaScript和CSS是构建动态、交互式用户体验的三大基石。本文将详细介绍如何利用这三种技术实现一个充满节日气氛的“除夕最炫烟花代码”。 首先，...
跨年烟花代码除夕最炫烟花代码（html+js编程）
01-09
跨年烟花代码是一种利用HTML和JavaScript技术实现的视觉特效，常用于庆祝节日或者特殊时刻，如除夕夜。这种效果能够模拟真实的烟花绽放场景，为网页增添喜庆氛围。以下将详细解析这一技术实现的关键知识点： 1. ...
跨年烟花代码(HTML+CSS+JS)
12-31
【跨年烟花代码(HTML+CSS+JS)】是一个网页项目，它利用了HTML、CSS和JavaScript这三种前端核心技术来创建一个动态的、富有节日氛围的网页。这个项目旨在为庆祝新年提供一种互动的方式，通过在用户界面上展示炫酷的...
【html+css+js+canvas】跨年代码烟花秀
01-21
【HTML+CSS+JS+Canvas】跨年代码烟花秀是一个技术与艺术的完美结合，它展示了程序员们如何利用编程语言创造出视觉上的惊喜。这个项目主要涉及了四个关键的技术领域：HTML、CSS、JavaScript以及HTML5的Canvas API。...
程序员过圣诞 | 用HTML写出绽放的烟花
亮点菌
12-25 2万+
2022年圣诞节到来啦，圣诞节是基督教纪念耶稣诞生的重要节日。亦称耶稣圣诞节、主降生节，天主教亦称耶稣圣诞瞻礼。耶稣诞生的日期，《圣经》并无记载。公元336年罗马教会开始在12月25日过此节。12月25日原是罗马帝国规定的太阳神诞辰。有人认为选择这天庆祝圣诞，是因为基督教徒认为耶稣就是正义、永恒的太阳。5世纪中叶以后，圣诞节作为重要节日，成了教会的传统，并在东西派教会中逐渐传开。因所用历法不同等原因，各教派会举行庆祝的具体日期和活动形式也有差别。
11套烟花代码，多种方式实现的烟花代码，基于Html/jQuery/css实现的烟花代码合集，总有一款是你喜欢的
Python代码大全
01-07 9477
基于HTML/CSS/Echarts的会议展览、业务监控、风险预警、数据分析展示等多种展示需求可视化集合。
Python 程序的输出 | 第一套
努力是为了站在万人之中，成为别人的光
03-06 3万+
预测以下 python 程序的输出： 程序一： r = lambda q: q * 2 s = lambda q: q * 3 x = 2 x = r(x) x = s(x) x = r(x) print (x) 输出： 24 解释： 在上述程序中，r 和 s 是 lambda 函数或匿名函数，q 是这两个函数的参数。在第一步中，我们将 x 初始化为 2。在第二步中，我们将 x 作为参数传递给 lambda 函数 r，这将返回存储在 x 中的 x*2。也就是说，现在 x = 4。同样，在第三步中，我们将
python炫酷烟花表白源代码-python炫酷烟花表白源代码
weixin_37988176的博客
10-30 6417
天天敲代码的朋友，有没有想过代码也可以变得很酷炫又浪漫？今天就教大家用Python模拟出绽放的烟花，工作之余也可以随时让程序为自己放一场烟花秀。python炫酷烟花表白源代码这个有趣的小项目并不复杂，只需一点可视化技巧，100余行Python代码和程序库Tkinter，最后我们就能达到下面这个效果：学完本教程后，你也能做出这样的烟花秀。整体概念梳理我们的整个理念比较简单。如上图示，我们这里通过让画...
【除夕最炫烟花代码】—— HTML+JQuery实现2022跨年烟花特效
超梦梦梦梦的博客
01-31 3万+
除夕马上到来，激动的心颤动的手！今年由于管控严厉，许多地方禁止燃放烟花爆竹，既然不让我们放，那我们就用代码来实现烟花特效！文末有彩蛋哦~
除夕最炫烟花代码----跨年必备合集
m0_67392010的博客
03-10 7561
导语： 除夕除夕，就是除去烦脑，迎接新的希望！在这里小编先祝大家除夕快乐，岁岁常欢笑，事事皆如意！ 正文： 创建画布 setup和draw是p5.js的两个主函数，里头的createCanvas用于创建画布的大小，background来设置画布的背景颜色 function setup() { createCanvas(1303 / 2, 734 / 2) } function draw() { background(50); } 画烟花粒子 考虑到会有很多，通过一个函数Particle
HTML烟花特效，除夕快到了，把它收藏下来，过年和最重要的她一起看烟花。
小祥编程擅长前端
11-19 1万+
HTML烟花特效，在这低碳环保的时代，烟花也越来越少的出现，除夕快到了，把它收藏下来，过年和最重要的她一起看烟花，一起欣赏烟花绚丽的美。
炫酷的表白烟花 html+css+js实现的表白烟花特效(程序员专属情人节表白网站)
网页设计与制作 | HTML+CSS+JS
10-08 2274
📒网站文件方面：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；📙网页编辑方面等任意html编辑软件进行运行及修改编辑等操作）。其中：（1）📜html文件包含：其中index.html是首页、其他html为二级页面；（2）📑 css文件包含：css全部页面样式,3D动态效果,雪花飘落等等（3）📄 js文件包含：页面炫酷效果实现。
html+css烟花代码
最新发布
05-14
HTML和CSS烟花代码是一种可以在网页上实现烟花效果的代码。具体实现方法如下： 1. 首先，在HTML文件中添加一个canvas标签，用于绘制烟花效果。 2. 在CSS文件中设置canvas标签的宽高等样式属性。 3. 在JS文件中编写绘制烟花效果的代码。具体实现方式如下： - 定义一个粒子对象，包括粒子的位置、速度、颜色等属性。 - 定义一个粒子数组，用于存储多个粒子对象。 - 编写一个update函数，用于更新每个粒子对象的位置、速度等属性，并将其绘制到canvas上。 - 编写一个render函数，用于不断调用update函数并清空canvas画布。 4. 在页面加载完毕后，调用render函数开始绘制烟花效果。 下面是一个简单的HTML+CSS烟花代码示例： HTML代码： ``` <canvas id="fireworks"></canvas> ``` CSS代码： ``` #fireworks { width: 100%; height: 100%; } ``` JS代码： ``` var canvas = document.getElementById('fireworks'); var ctx = canvas.getContext('2d'); // 粒子对象 function Particle(x, y, vx, vy, color) { this.x = x; this.y = y; this.vx = vx; this.vy = vy; this.color = color; } // 粒子数组 var particles = []; // 更新粒子对象 function update(particle) { particle.x += particle.vx; particle.y += particle.vy; particle.vy += 0.1; ctx.beginPath(); ctx.fillStyle = particle.color; ctx.arc(particle.x, particle.y, 5, 0, Math.PI * 2); ctx.fill(); } // 清空画布并更新粒子数组 function render() { ctx.clearRect(0, 0, canvas.width, canvas.height); particles.forEach(function(particle) { update(particle); }); requestAnimationFrame(render); } // 初始化粒子数组并开始绘制烟花效果 for (var i = 0; i < 50; i++) { particles.push(new Particle(canvas.width / 2, canvas.height, Math.random() * 6 - 3, Math.random() * -10 - 5, 'rgb(' + Math.floor(Math.random() * 256) + ',' + Math.floor(Math.random() * 256) + ',' + Math.floor(Math.random() * 256) + ')')); } render(); ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 71
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

我想养只猫 •͓͡•ʔ

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值