HTML新春烟花
系列文章
序号 | 目录 |
1 | HTML满屏跳动的爱心(可写字) |
2 | HTML五彩缤纷的爱心 |
3 | HTML满屏漂浮爱心 |
4 | HTML情人节快乐 |
5 | HTML蓝色爱心射线 |
6 | HTML跳动的爱心(简易版) |
7 | HTML粒子爱心 |
8 | HTML蓝色动态爱心 |
9 | HTML跳动的爱心(双心版) |
10 | HTML橙色动态粒子爱心 |
11 | HTML旋转爱心 |
12 | HTML爱情树 |
13 | HTML3D相册 |
14 | HTML旋转相册 |
15 | HTML基础烟花秀 |
16 | HTML炫酷烟花秀 |
17 | HTML粉色烟花秀 |
18 | HTML新春烟花 |
19 | HTML跨年烟花 |
20 | HTML音乐圣诞树 |
21 | HTML大雪纷飞 |
22 | HTML想见你 |
23 | HTML元素周期表 |
24 | HTML飞舞的花瓣 |
25 | HTML星空特效 |
26 | HTML黑客帝国字母雨 |
27 | HTML哆啦A梦 |
28 | HTML流星雨 |
29 | HTML沙漏爱心 |
30 | HTML爱心字母雨 |
31 | HTML爱心流星雨 |
32 | HTML生日蛋糕 |
33 | HTML3D旋转相册 |
34 | HTML流光爱心 |
35 | HTML满屏飘字 |
36 | HTML飞舞爱心 |
37 | HTML星空圣诞树 |
38 | HTML礼物圣诞树 |
39 | HTML粉色爱心 |
40 | HTML旋转圣诞树 |
文章目录
- 系列文章
- 写在前面
- 技术需求
- 完整代码
- 代码分析
- 一、HTML结构分析
- 二、CSS样式分析
- 三、JavaScript实现功能分析
- 1. 全局变量初始化
- 2. 烟花和粒子类设计
- (1)`Firework`类
- (2)`Particle`类
- 3. 烟花效果的生成与动画
- 4. 窗口自适应
- 四、代码运行机制与特点
- 五、总结
- 写在后面
写在前面
HTML语言实现新春烟花的完整代码。
技术需求
-
HTML5 Canvas
- 通过
<canvas>
标签和其绘图上下文2D
(getContext("2d")
)实现烟花动画的动态绘制。
- 通过
-
CSS样式
- 使用绝对定位(
position: absolute
)实现文字居中。 - 动态字体大小(
vw
单位)和颜色渐变(text-shadow
)增强视觉效果。 - 设置深色背景(
background-color
)突出烟花效果。
- 使用绝对定位(
-
JavaScript动画
- 面向对象编程:定义
Firework
和Particle
类,封装烟花与粒子行为(位置、速度、透明度等)。 - 动画实现:通过
requestAnimationFrame
保持动画流畅;粒子动态属性(如摩擦力、重力和透明度)模拟真实物理效果。 - 随机性:使用
Math.random
控制粒子数量、颜色、方向、速度等,生成多样化烟花效果。 - 拖尾效果:通过在每一帧绘制半透明矩形实现烟花拖尾视觉。
- 面向对象编程:定义
-
事件监听
- 监听
resize
事件,动态调整<canvas>
画布大小以适应窗口变化。
- 监听
完整代码
<!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 {margin: 0;overflow: hidden;background-color: #14141E;font-family: Arial, sans-serif;}canvas {display: block;}#text {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);font-size: 5vw;font-weight: bold;color: rgb(255, 190, 200);text-shadow: 2px 2px 10px rgba(255, 190, 200, 0.7);}</style>
</head>
<body><div id="text">Happy New Year!</div><canvas id="fireworks"></canvas><script>const canvas = document.getElementById("fireworks");const ctx = canvas.getContext("2d");canvas.width = window.innerWidth;canvas.height = window.innerHeight;const colors = ["#ff4d4d", "#ff9933", "#ffcc00", "#33cc33", "#33cccc", "#3399ff", "#cc66ff"];
……
代码分析
以下是对这段HTML代码的详细分析,从页面结构、样式设计到JavaScript实现功能进行全面解读:
一、HTML结构分析
-
文档声明与基本结构
- 代码以
<!DOCTYPE html>
开头,表明该文档是HTML5标准文档。 <html>
标签包含了整个页面内容,lang="en"
设置页面语言为英语。<head>
标签中定义了元信息:<meta charset="UTF-8">
指定页面使用UTF-8字符编码,确保字符显示正确。<meta name="viewport" content="width=device-width, initial-scale=1.0">
设置页面在不同设备上的自适应布局。<title>
定义了页面标题为“新春烟花”。
<body>
标签内包含了一个<div>
元素用于显示新年祝福文字,以及一个<canvas>
元素用于绘制烟花动画。
- 代码以
-
关键HTML元素
<div id="text">
: 显示的文字内容“Happy New Year!”用来增强节日氛围。<canvas id="fireworks">
: 用于绘制烟花动画的画布元素,提供了动态展示的基础。
二、CSS样式分析
-
页面整体样式
body
样式:margin: 0
:移除默认页面外边距,使内容充满页面。overflow: hidden
:隐藏滚动条,避免影响动画展示效果。background-color: #14141E
:设置深色背景,与烟花的明亮效果形成对比。font-family: Arial, sans-serif
:定义了页面字体。
-
canvas
样式display: block
:消除画布默认的内边距和边框,使其完全平铺页面。
-
#text
样式position: absolute
:使文字相对于页面绝对定位。top: 50%
和left: 50%
:将文字置于页面中心。transform: translate(-50%, -50%)
:精确居中,确保文字位置不因字体大小而偏移。font-size: 5vw
:文字大小相对于视口宽度动态调整。font-weight: bold
:加粗字体,突出显示。color: rgb(255, 190, 200)
:柔和的粉红色字体,增强节日氛围。text-shadow
:添加光晕效果,使文字显得更为亮丽。
三、JavaScript实现功能分析
JavaScript部分的核心是烟花的生成与动画效果,通过<canvas>
元素进行绘制。代码逻辑分为以下几个部分:
1. 全局变量初始化
canvas
和ctx
:获取画布元素及其上下文,ctx
用于调用绘图API。colors
:定义了多个颜色值数组,用于烟花的颜色随机选择。
2. 烟花和粒子类设计
代码使用了两种类:Firework
和Particle
,分别用于描述烟花和烟花粒子。
(1)Firework
类
- 构造函数:
- 参数
x
和y
指定烟花中心点的初始位置。 this.particles
存储粒子对象数组。- 调用
createParticles
方法生成粒子。
- 参数
- 方法:
createParticles
:生成一定数量的粒子,粒子数量在50到100之间随机。update
:更新每个粒子的状态(位置、透明度等)。当粒子透明度降至0以下时,将其从数组中移除。draw
:调用每个粒子的绘制方法。
(2)Particle
类
- 构造函数:
x
和y
为粒子初始位置。radius
:粒子大小随机,范围在2到5之间。color
:从颜色数组中随机选择颜色。angle
:粒子初始运动方向随机。speed
:粒子的初速度随机,范围在2到7之间。friction
和gravity
:摩擦力和重力影响粒子运动。alpha
:粒子透明度,用于渐隐效果。
- 方法:
update
:计算粒子的新位置,速度逐渐减小,同时透明度减少。draw
:绘制粒子为一个带颜色的圆形,透明度由globalAlpha
控制。
3. 烟花效果的生成与动画
- 全局数组
fireworks
用于存储所有当前活动的烟花。 addFirework
方法:在随机位置创建一个新的烟花,并加入fireworks
数组。animate
函数:- 先用半透明矩形覆盖整个画布,产生拖影效果,使粒子轨迹更明显。
- 遍历
fireworks
数组,更新并绘制每个烟花对象。如果烟花的所有粒子已消失,则将其移除。 - 使用
Math.random() < 0.05
控制新烟花生成的概率,使动画间隔随机。 - 使用
requestAnimationFrame
保持动画连续性。
4. 窗口自适应
window.addEventListener("resize")
监听窗口大小变化事件。- 每当窗口调整大小时,更新画布宽高以适应新尺寸。
四、代码运行机制与特点
-
烟花效果实现:
- 通过粒子生成与运动模拟烟花爆炸的效果。
- 粒子的颜色、运动方向、速度等均为随机,增强视觉的自然感。
- 每次刷新画布时保留上一帧的残影,形成拖尾效果。
-
节日氛围营造:
- 中心文字配合柔和的背景和动态烟花,充分体现新年喜庆的主题。
- 动态画面与静态文字相结合,增加了视觉层次感。
-
性能优化:
- 粒子通过
alpha
属性逐渐透明并移除,减少了内存占用。 - 拖尾效果使用半透明矩形而非完全清空画布,降低了绘制开销。
- 粒子通过
-
响应式设计:
- 使用
vw
单位和监听窗口变化事件,确保页面在不同设备上都能良好显示。
- 使用
五、总结
-
功能扩展:
- 可增加鼠标点击触发烟花效果的功能,提升互动性。
- 添加不同形状的烟花,例如星形、心形等,丰富视觉效果。
- 支持背景音乐播放,进一步增强节日气氛。
-
性能优化:
- 对粒子数量上限进行限制,以避免在低性能设备上出现卡顿。
- 使用
offscreen canvas
处理复杂计算,进一步提升渲染性能。
-
用户自定义:
- 提供一个控制面板,让用户自定义烟花颜色、大小、数量等参数。
这段代码实现了一个极具节日气氛的动态烟花效果,通过HTML、CSS和JavaScript的良好结合,不仅展现了动画设计的美感,还体现了较高的代码组织与性能优化水平。
写在后面
我是一只有趣的兔子,感谢你的喜欢。
相关文章:

HTML新春烟花
系列文章 序号目录1HTML满屏跳动的爱心(可写字)2HTML五彩缤纷的爱心3HTML满屏漂浮爱心4HTML情人节快乐5HTML蓝色爱心射线6HTML跳动的爱心(简易版)7HTML粒子爱心8HTML蓝色动态爱心9HTML跳动的爱心(双心版)10…...
【Elasticsearch】中数据流需要配置索引模板吗?
是的,数据流需要配置索引模板。在Elasticsearch中,数据流(Data Streams)是一种用于处理时间序列数据的高级结构,它背后由多个隐藏的索引组成,这些索引被称为后备索引(Backing Indices࿰…...

Git进阶之旅:Git 配置信息 Config
Git 配置级别: 仓库级别:local [ 优先级最高 ]用户级别:global [ 优先级次之 ]系统级别:system [ 优先级最低 ] 配置文件位置: git 仓库级别对应的配置文件是当前仓库下的 .git/configgit 用户级别对应的配置文件时用…...

buu-pwn1_sctf_2016-好久不见29
这个也是栈溢出,不一样的点是,有replace替换,要输入0x3c字符(60),Iyou 所以,20个I就行,找后面函数 输出提示信息,要求用户输入关于自己的信息。 使用fgets函数从标准输入…...
ES2021+新特性、常用函数
一、ES2021新特性 ES2021 数字分隔符 let num 1234567 let num2 1_234_567 Promise.any 与 Promise.all 类似,Promise.any 也接受一个 Promise 的数组。当其中任何一个 Promise 完成(fullfill)时,就返回那个已经有完成值的 …...

STM32——LCD
一、引脚配置 查看引脚 将上述引脚都设置为GPIO_Output 二、导入驱动文件 将 LCD 驱动的 Inc 以及 Src 中的 fonts.h,lcd.h 和 lcd.c 导入到自己工程的驱动文件中。 当然,后面 lcd 的驱动学习可以和 IMX6U 一块学。 三、LCD函数 void LCD_Clear(u16 Color); 功能…...

【redis进阶】分布式锁
目录 一、什么是分布式锁 二、分布式锁的基础实现 三、引入过期时间 四、引入校验 id 五、引入lua 六、引入 watch dog (看门狗) 七、引入 Redlock 算法 八、其他功能 redis学习🥳 一、什么是分布式锁 在一个分布式的系统中,也会涉及到多个节点访问同一…...

园区管理系统如何提升企业核心竞争力与资产管理智能化水平
内容概要 在当今快节奏的商业环境中,园区管理系统正成为企业的重要合作伙伴,尤其在工业园、产业园、物流园、写字楼和公寓等多种类型的物业管理中。这个系统不仅仅是一个管理工具,它还是提升企业运营效率和核心竞争力的关键因素。通过智能化…...
AI大模型开发原理篇-3:词向量和词嵌入
简介 词向量是用于表示单词意义的向量, 并且还可以被认为是单词的特征向量或表示。 将单词映射到实向量的技术称为词嵌入。在实际应用中,词向量和词嵌入这两个重要的NLP术语通常可以互换使用。它们都表示将词汇表中的单词映射到固定大小的连续向量空间中…...

高精度算法:高精度减法
P2142 高精度减法 - 洛谷 | 计算机科学教育新生态 我们两个整数一定要是大数减去小数,所以这个点我们需要特判一下,那我们两个字符串表示的整型怎么判断大小呢,我们字典序比较大小和真实的数字比较大小是一样的,比如我们的‘21’…...

Java创建项目准备工作
新建项目 新建空项目 每一个空项目创建好后都要检查jdk版本 检查SDK和语言级别——Apply——OK 检查当前项目的Maven路径,如果已经配置好全局,就是正确路径不用管 修改项目字符集编码,将所有编码都调整为UTF-8 创建Spingboot工程 创建Spring…...
基于STM32的智能宠物喂食器设计
目录 引言系统设计 硬件设计软件设计 系统功能模块 定时喂食模块远程控制与视频监控模块食物存量检测与报警模块语音互动与用户交互模块数据记录与智能分析模块 控制算法 定时与手动投喂算法食物存量检测与低存量提醒算法数据记录与远程反馈算法 代码实现 喂食控制代码存量检测…...

在线课堂小程序设计与实现(LW+源码+讲解)
专注于大学生项目实战开发,讲解,毕业答疑辅导,欢迎高校老师/同行前辈交流合作✌。 技术范围:SpringBoot、Vue、SSM、HLMT、小程序、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、安卓app、大数据、物联网、机器学习等设计与开发。 主要内容:…...
为AI聊天工具添加一个知识系统 之77 详细设计之18 正则表达式 之5
本文要点 昨天讨论了 本项目(AI聊天工具添加一个知识系统)中正则表达式模板的设计中可能要考虑到的一些问题(讨论到的内容比较随意,暂时无法确定 那些考虑 是否 应该是正则表达式模板设计要考虑的以及 是否完整)。今天…...
【Elasticsearch】 索引模板 ignore_missing_component_templates
解释 ignore_missing_component_templates 配置 在Elasticsearch中,ignore_missing_component_templates 是一个配置选项,用于处理索引模板中引用的组件模板可能不存在的情况。当您创建一个索引模板时,可以指定一个或多个组件模板࿰…...
Github 2025-01-29 C开源项目日报 Top10
根据Github Trendings的统计,今日(2025-01-29统计)共有10个项目上榜。根据开发语言中项目的数量,汇总情况如下: 开发语言项目数量C项目10C++项目1Assembly项目1Go项目1我的电视 - 安卓电视直播软件 创建周期:40 天开发语言:CStar数量:649 个Fork数量:124 次关注人数:64…...

文件上传2
BUUCTF 你传你🐎呢 先上传.htaccess 修改格式 即可上传成功 返回上传图片格式的木马 用蚁剑连接 5ecf1cca-59a1-408b-b616-090edf124db5.node5.buuoj.cn:81/upload/7d8511a847edeacb5385299396a96d91/rao.jpg 即可得到flag [GXYCTF2019]BabyUpload...

Unity敌人逻辑笔记
写ai逻辑基本上都需要状态机。因为懒得手搓状态机,所以选择直接用动画状态机当逻辑状态机用。 架构设计 因为敌人的根节点已经有一个animator控制动画,只能增加一个子节点AI,给它加一个animator指向逻辑“动画”状态机。还有一个脚本&#…...

高级编码参数
1.跳帧机制 参考资料:frameskipping-hotedgevideo 跳帧机制用于优化视频质量和编码效率。它通过选择性地跳过某些帧并使用参考帧来预测和重建视频内容,从而减少编码所需的比特率,同时保持较高的视频质量。在视频编码过程中,如果…...

DeepSeek-R1:通过强化学习激励大型语言模型(LLMs)的推理能力
摘要 我们推出了第一代推理模型:DeepSeek-R1-Zero和DeepSeek-R1。DeepSeek-R1-Zero是一个未经监督微调(SFT)作为初步步骤,而是通过大规模强化学习(RL)训练的模型,展现出卓越的推理能力。通过强…...
Python爬虫实战:研究MechanicalSoup库相关技术
一、MechanicalSoup 库概述 1.1 库简介 MechanicalSoup 是一个 Python 库,专为自动化交互网站而设计。它结合了 requests 的 HTTP 请求能力和 BeautifulSoup 的 HTML 解析能力,提供了直观的 API,让我们可以像人类用户一样浏览网页、填写表单和提交请求。 1.2 主要功能特点…...
设计模式和设计原则回顾
设计模式和设计原则回顾 23种设计模式是设计原则的完美体现,设计原则设计原则是设计模式的理论基石, 设计模式 在经典的设计模式分类中(如《设计模式:可复用面向对象软件的基础》一书中),总共有23种设计模式,分为三大类: 一、创建型模式(5种) 1. 单例模式(Sing…...
Linux链表操作全解析
Linux C语言链表深度解析与实战技巧 一、链表基础概念与内核链表优势1.1 为什么使用链表?1.2 Linux 内核链表与用户态链表的区别 二、内核链表结构与宏解析常用宏/函数 三、内核链表的优点四、用户态链表示例五、双向循环链表在内核中的实现优势5.1 插入效率5.2 安全…...
MySQL 隔离级别:脏读、幻读及不可重复读的原理与示例
一、MySQL 隔离级别 MySQL 提供了四种隔离级别,用于控制事务之间的并发访问以及数据的可见性,不同隔离级别对脏读、幻读、不可重复读这几种并发数据问题有着不同的处理方式,具体如下: 隔离级别脏读不可重复读幻读性能特点及锁机制读未提交(READ UNCOMMITTED)允许出现允许…...

智慧工地云平台源码,基于微服务架构+Java+Spring Cloud +UniApp +MySql
智慧工地管理云平台系统,智慧工地全套源码,java版智慧工地源码,支持PC端、大屏端、移动端。 智慧工地聚焦建筑行业的市场需求,提供“平台网络终端”的整体解决方案,提供劳务管理、视频管理、智能监测、绿色施工、安全管…...

[10-3]软件I2C读写MPU6050 江协科技学习笔记(16个知识点)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16...

12.找到字符串中所有字母异位词
🧠 题目解析 题目描述: 给定两个字符串 s 和 p,找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义: 若两个字符串包含的字符种类和出现次数完全相同,顺序无所谓,则互为…...
Caliper 配置文件解析:config.yaml
Caliper 是一个区块链性能基准测试工具,用于评估不同区块链平台的性能。下面我将详细解释你提供的 fisco-bcos.json 文件结构,并说明它与 config.yaml 文件的关系。 fisco-bcos.json 文件解析 这个文件是针对 FISCO-BCOS 区块链网络的 Caliper 配置文件,主要包含以下几个部…...

九天毕昇深度学习平台 | 如何安装库?
pip install 库名 -i https://pypi.tuna.tsinghua.edu.cn/simple --user 举个例子: 报错 ModuleNotFoundError: No module named torch 那么我需要安装 torch pip install torch -i https://pypi.tuna.tsinghua.edu.cn/simple --user pip install 库名&#x…...

用机器学习破解新能源领域的“弃风”难题
音乐发烧友深有体会,玩音乐的本质就是玩电网。火电声音偏暖,水电偏冷,风电偏空旷。至于太阳能发的电,则略显朦胧和单薄。 不知你是否有感觉,近两年家里的音响声音越来越冷,听起来越来越单薄? —…...