当前位置： 首页 > news >正文

HTML新春烟花

news 2025/12/24 18:05:05

fireworks

系列文章

序号目录
1HTML满屏跳动的爱心（可写字）
2HTML五彩缤纷的爱心
3HTML满屏漂浮爱心
4HTML情人节快乐
5HTML蓝色爱心射线
6HTML跳动的爱心（简易版）
7HTML粒子爱心
8HTML蓝色动态爱心
9HTML跳动的爱心（双心版）
10HTML橙色动态粒子爱心
11HTML旋转爱心
12HTML爱情树
13HTML3D相册
14HTML旋转相册
15HTML基础烟花秀
16HTML炫酷烟花秀
17HTML粉色烟花秀
18HTML新春烟花
19HTML跨年烟花
20HTML音乐圣诞树
21HTML大雪纷飞
22HTML想见你
23HTML元素周期表
24HTML飞舞的花瓣
25HTML星空特效
26HTML黑客帝国字母雨
27HTML哆啦A梦
28HTML流星雨
29HTML沙漏爱心
30HTML爱心字母雨
31HTML爱心流星雨
32HTML生日蛋糕
33HTML3D旋转相册
34HTML流光爱心
35HTML满屏飘字
36HTML飞舞爱心
37HTML星空圣诞树
38HTML礼物圣诞树
39HTML粉色爱心
40HTML旋转圣诞树

文章目录

  • 系列文章
  • 写在前面
  • 技术需求
  • 完整代码
  • 代码分析
    • 一、HTML结构分析
    • 二、CSS样式分析
    • 三、JavaScript实现功能分析
      • 1. 全局变量初始化
      • 2. 烟花和粒子类设计
        • （1）`Firework`类
        • （2）`Particle`类
      • 3. 烟花效果的生成与动画
      • 4. 窗口自适应
    • 四、代码运行机制与特点
    • 五、总结
  • 写在后面

写在前面

HTML语言实现新春烟花的完整代码。

技术需求

  1. HTML5 Canvas

    • 通过<canvas>标签和其绘图上下文2D（getContext("2d")）实现烟花动画的动态绘制。

  2. CSS样式

    • 使用绝对定位（position: absolute）实现文字居中。
    • 动态字体大小（vw单位）和颜色渐变（text-shadow）增强视觉效果。
    • 设置深色背景（background-color）突出烟花效果。

  3. JavaScript动画

    • 面向对象编程：定义Firework和Particle类，封装烟花与粒子行为（位置、速度、透明度等）。
    • 动画实现：通过requestAnimationFrame保持动画流畅；粒子动态属性（如摩擦力、重力和透明度）模拟真实物理效果。
    • 随机性：使用Math.random控制粒子数量、颜色、方向、速度等，生成多样化烟花效果。
    • 拖尾效果：通过在每一帧绘制半透明矩形实现烟花拖尾视觉。

  4. 事件监听

    • 监听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结构分析

  1. 文档声明与基本结构

    • 代码以<!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>元素用于绘制烟花动画。

  2. 关键HTML元素

    • <div id="text">: 显示的文字内容“Happy New Year!”用来增强节日氛围。
    • <canvas id="fireworks">: 用于绘制烟花动画的画布元素，提供了动态展示的基础。

二、CSS样式分析

  1. 页面整体样式

    • body样式：
      • margin: 0：移除默认页面外边距，使内容充满页面。
      • overflow: hidden：隐藏滚动条，避免影响动画展示效果。
      • background-color: #14141E：设置深色背景，与烟花的明亮效果形成对比。
      • font-family: Arial, sans-serif：定义了页面字体。

  2. canvas样式

    • display: block：消除画布默认的内边距和边框，使其完全平铺页面。

  3. #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")监听窗口大小变化事件。
  • 每当窗口调整大小时，更新画布宽高以适应新尺寸。

四、代码运行机制与特点

  1. 烟花效果实现：

    • 通过粒子生成与运动模拟烟花爆炸的效果。
    • 粒子的颜色、运动方向、速度等均为随机，增强视觉的自然感。
    • 每次刷新画布时保留上一帧的残影，形成拖尾效果。

  2. 节日氛围营造：

    • 中心文字配合柔和的背景和动态烟花，充分体现新年喜庆的主题。
    • 动态画面与静态文字相结合，增加了视觉层次感。

  3. 性能优化：

    • 粒子通过alpha属性逐渐透明并移除，减少了内存占用。
    • 拖尾效果使用半透明矩形而非完全清空画布，降低了绘制开销。

  4. 响应式设计：

    • 使用vw单位和监听窗口变化事件，确保页面在不同设备上都能良好显示。

五、总结

  1. 功能扩展：

    • 可增加鼠标点击触发烟花效果的功能，提升互动性。
    • 添加不同形状的烟花，例如星形、心形等，丰富视觉效果。
    • 支持背景音乐播放，进一步增强节日气氛。

  2. 性能优化：

    • 对粒子数量上限进行限制，以避免在低性能设备上出现卡顿。
    • 使用offscreen canvas处理复杂计算，进一步提升渲染性能。

  3. 用户自定义：

    • 提供一个控制面板，让用户自定义烟花颜色、大小、数量等参数。

这段代码实现了一个极具节日气氛的动态烟花效果，通过HTML、CSS和JavaScript的良好结合，不仅展现了动画设计的美感，还体现了较高的代码组织与性能优化水平。

写在后面

我是一只有趣的兔子，感谢你的喜欢。

相关文章：

HTML新春烟花

系列文章 序号目录1HTML满屏跳动的爱心&#xff08;可写字&#xff09;2HTML五彩缤纷的爱心3HTML满屏漂浮爱心4HTML情人节快乐5HTML蓝色爱心射线6HTML跳动的爱心&#xff08;简易版&#xff09;7HTML粒子爱心8HTML蓝色动态爱心9HTML跳动的爱心&#xff08;双心版&#xff09;10…...

编程日记 2025/1/31 3:59:00

【Elasticsearch】中数据流需要配置索引模板吗？

是的&#xff0c;数据流需要配置索引模板。在Elasticsearch中&#xff0c;数据流&#xff08;Data Streams&#xff09;是一种用于处理时间序列数据的高级结构&#xff0c;它背后由多个隐藏的索引组成&#xff0c;这些索引被称为后备索引&#xff08;Backing Indices&#xff0…...

编程日记 2025/1/31 3:56:51

Git进阶之旅：Git 配置信息 Config

Git 配置级别&#xff1a; 仓库级别&#xff1a;local [ 优先级最高 ]用户级别&#xff1a;global [ 优先级次之 ]系统级别&#xff1a;system [ 优先级最低 ] 配置文件位置&#xff1a; git 仓库级别对应的配置文件是当前仓库下的 .git/configgit 用户级别对应的配置文件时用…...

编程日记 2025/1/31 3:54:49

buu-pwn1_sctf_2016-好久不见29

这个也是栈溢出&#xff0c;不一样的点是&#xff0c;有replace替换&#xff0c;要输入0x3c字符&#xff08;60&#xff09;&#xff0c;Iyou 所以&#xff0c;20个I就行&#xff0c;找后面函数 输出提示信息&#xff0c;要求用户输入关于自己的信息。 使用fgets函数从标准输入…...

编程日记 2025/1/31 3:53:46

ES2021+新特性、常用函数

一、ES2021新特性 ES2021 数字分隔符 let num 1234567 let num2 1_234_567 Promise.any 与 Promise.all 类似&#xff0c;Promise.any 也接受一个 Promise 的数组。当其中任何一个 Promise 完成&#xff08;fullfill&#xff09;时&#xff0c;就返回那个已经有完成值的 …...

编程日记 2025/1/31 3:51:40

STM32——LCD

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

编程日记 2025/1/31 3:49:37

【redis进阶】分布式锁

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

编程日记 2025/1/31 3:48:32

园区管理系统如何提升企业核心竞争力与资产管理智能化水平

内容概要 在当今快节奏的商业环境中&#xff0c;园区管理系统正成为企业的重要合作伙伴&#xff0c;尤其在工业园、产业园、物流园、写字楼和公寓等多种类型的物业管理中。这个系统不仅仅是一个管理工具&#xff0c;它还是提升企业运营效率和核心竞争力的关键因素。通过智能化…...

编程日记 2025/1/31 3:47:28

AI大模型开发原理篇-3：词向量和词嵌入

简介 词向量是用于表示单词意义的向量&#xff0c; 并且还可以被认为是单词的特征向量或表示。 将单词映射到实向量的技术称为词嵌入。在实际应用中&#xff0c;词向量和词嵌入这两个重要的NLP术语通常可以互换使用。它们都表示将词汇表中的单词映射到固定大小的连续向量空间中…...

编程日记 2025/1/31 3:46:23

高精度算法：高精度减法

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

编程日记 2025/1/31 3:45:17

Java创建项目准备工作

新建项目 新建空项目 每一个空项目创建好后都要检查jdk版本 检查SDK和语言级别——Apply——OK 检查当前项目的Maven路径&#xff0c;如果已经配置好全局&#xff0c;就是正确路径不用管 修改项目字符集编码&#xff0c;将所有编码都调整为UTF-8 创建Spingboot工程 创建Spring…...

编程日记 2025/1/31 3:36:06

基于STM32的智能宠物喂食器设计

目录 引言系统设计 硬件设计软件设计 系统功能模块 定时喂食模块远程控制与视频监控模块食物存量检测与报警模块语音互动与用户交互模块数据记录与智能分析模块 控制算法 定时与手动投喂算法食物存量检测与低存量提醒算法数据记录与远程反馈算法 代码实现 喂食控制代码存量检测…...

编程日记 2025/1/31 3:35:01

在线课堂小程序设计与实现（LW+源码+讲解）

专注于大学生项目实战开发,讲解,毕业答疑辅导&#xff0c;欢迎高校老师/同行前辈交流合作✌。 技术范围&#xff1a;SpringBoot、Vue、SSM、HLMT、小程序、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、安卓app、大数据、物联网、机器学习等设计与开发。 主要内容&#xff1a;…...

编程日记 2025/1/31 3:32:53

为AI聊天工具添加一个知识系统 之77 详细设计之18 正则表达式 之5

本文要点 昨天讨论了 本项目&#xff08;AI聊天工具添加一个知识系统&#xff09;中正则表达式模板的设计中可能要考虑到的一些问题&#xff08;讨论到的内容比较随意&#xff0c;暂时无法确定 那些考虑 是否 应该是正则表达式模板设计要考虑的以及 是否完整&#xff09;。今天…...

编程日记 2025/1/31 3:28:39

【Elasticsearch】 索引模板 ignore_missing_component_templates

解释 ignore_missing_component_templates 配置 在Elasticsearch中&#xff0c;ignore_missing_component_templates 是一个配置选项&#xff0c;用于处理索引模板中引用的组件模板可能不存在的情况。当您创建一个索引模板时&#xff0c;可以指定一个或多个组件模板&#xff0…...

编程日记 2025/1/31 3:14:02

Github 2025-01-29 C开源项目日报 Top10

根据Github Trendings的统计，今日(2025-01-29统计)共有10个项目上榜。根据开发语言中项目的数量，汇总情况如下： 开发语言项目数量C项目10C++项目1Assembly项目1Go项目1我的电视 - 安卓电视直播软件 创建周期：40 天开发语言：CStar数量：649 个Fork数量：124 次关注人数：64…...

编程日记 2025/1/31 3:12:44

文件上传2

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

编程日记 2025/1/31 3:10:14

Unity敌人逻辑笔记

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

编程日记 2025/1/31 3:08:57

高级编码参数

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

编程日记 2025/1/31 3:04:28

DeepSeek-R1：通过强化学习激励大型语言模型（LLMs）的推理能力

摘要 我们推出了第一代推理模型&#xff1a;DeepSeek-R1-Zero和DeepSeek-R1。DeepSeek-R1-Zero是一个未经监督微调&#xff08;SFT&#xff09;作为初步步骤&#xff0c;而是通过大规模强化学习&#xff08;RL&#xff09;训练的模型&#xff0c;展现出卓越的推理能力。通过强…...

编程日记 2025/1/31 3:02:09

零门槛NAS搭建：WinNAS如何让普通电脑秒变私有云？

一、核心优势&#xff1a;专为Windows用户设计的极简NAS WinNAS由深圳耘想存储科技开发&#xff0c;是一款收费低廉但功能全面的Windows NAS工具&#xff0c;主打“无学习成本部署” 。与其他NAS软件相比&#xff0c;其优势在于&#xff1a; 无需硬件改造&#xff1a;将任意W…...

编程新知 2025/9/22 15:46:39

蓝牙 BLE 扫描面试题大全(2)：进阶面试题与实战演练

前文覆盖了 BLE 扫描的基础概念与经典问题蓝牙 BLE 扫描面试题大全(1)&#xff1a;从基础到实战的深度解析-CSDN博客&#xff0c;但实际面试中&#xff0c;企业更关注候选人对复杂场景的应对能力&#xff08;如多设备并发扫描、低功耗与高发现率的平衡&#xff09;和前沿技术的…...

编程新知 2025/12/21 8:21:58

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院挂号小程序

一、开发准备 ​​环境搭建​​&#xff1a; 安装DevEco Studio 3.0或更高版本配置HarmonyOS SDK申请开发者账号 ​​项目创建​​&#xff1a; File > New > Create Project > Application (选择"Empty Ability") 二、核心功能实现 1. 医院科室展示 /…...

编程新知 2025/9/5 12:16:40

Spring Boot面试题精选汇总

&#x1f91f;致敬读者 &#x1f7e9;感谢阅读&#x1f7e6;笑口常开&#x1f7ea;生日快乐⬛早点睡觉 &#x1f4d8;博主相关 &#x1f7e7;博主信息&#x1f7e8;博客首页&#x1f7eb;专栏推荐&#x1f7e5;活动信息 文章目录 Spring Boot面试题精选汇总⚙️ **一、核心概…...

编程新知 2025/9/24 23:08:17

LLM基础1_语言模型如何处理文本

基于GitHub项目&#xff1a;https://github.com/datawhalechina/llms-from-scratch-cn 工具介绍 tiktoken&#xff1a;OpenAI开发的专业"分词器" torch&#xff1a;Facebook开发的强力计算引擎&#xff0c;相当于超级计算器 理解词嵌入&#xff1a;给词语画"…...

编程新知 2025/9/25 5:16:24

AI，如何重构理解、匹配与决策？

AI 时代&#xff0c;我们如何理解消费&#xff1f; 作者&#xff5c;王彬 封面&#xff5c;Unplash 人们通过信息理解世界。 曾几何时&#xff0c;PC 与移动互联网重塑了人们的购物路径&#xff1a;信息变得唾手可得&#xff0c;商品决策变得高度依赖内容。 但 AI 时代的来…...

编程新知 2025/12/20 2:03:51

vulnyx Blogger writeup

信息收集 arp-scan nmap 获取userFlag 上web看看 一个默认的页面&#xff0c;gobuster扫一下目录 可以看到扫出的目录中得到了一个有价值的目录/wordpress&#xff0c;说明目标所使用的cms是wordpress&#xff0c;访问http://192.168.43.213/wordpress/然后查看源码能看到 这…...

编程新知 2025/12/19 14:27:51

CSS | transition 和 transform的用处和区别

省流总结&#xff1a; transform用于变换/变形&#xff0c;transition是动画控制器 transform 用来对元素进行变形&#xff0c;常见的操作如下&#xff0c;它是立即生效的样式变形属性。 旋转 rotate(角度deg)、平移 translateX(像素px)、缩放 scale(倍数)、倾斜 skewX(角度…...

编程新知 2025/10/17 20:59:57

uniapp 开发ios， xcode 提交app store connect 和 testflight内测

uniapp 中配置 配置manifest 文档&#xff1a;manifest.json 应用配置 | uni-app官网 hbuilderx中本地打包 下载IOS最新SDK 开发环境 | uni小程序SDK hbulderx 版本号&#xff1a;4.66 对应的sdk版本 4.66 两者必须一致 本地打包的资源导入到SDK 导入资源 | uni小程序SDK …...

编程新知 2025/12/23 7:18:58

算法打卡第18天

从中序与后序遍历序列构造二叉树 (力扣106题) 给定两个整数数组 inorder 和 postorder &#xff0c;其中 inorder 是二叉树的中序遍历&#xff0c; postorder 是同一棵树的后序遍历&#xff0c;请你构造并返回这颗 二叉树 。 示例 1: 输入&#xff1a;inorder [9,3,15,20,7…...

编程新知 2025/12/22 18:57:37