HTML新春烟花

2026-02-07 19:27:07 栏目：最新资讯 8 阅读

系列文章

序号	目录
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	HTML元素周期表
14	HTML飞舞的花瓣
15	HTML星空特效
16	HTML黑客帝国字母雨
17	HTML哆啦A梦
18	HTML流星雨
19	HTML沙漏爱心
20	HTML爱心字母雨
21	HTML爱心流星雨
22	HTML生日蛋糕
23	HTML流光爱心
24	HTML粉色爱心
25	HTML满屏飘字
26	HTML飞舞爱心
27	HTML音乐圣诞树
28	HTML星空圣诞树
29	HTML礼物圣诞树
30	HTML旋转圣诞树
31	HTML旋转相册①
32	HTML旋转相册②
33	HTML旋转相册③
34	HTML大雪纷飞①
35	HTML大雪纷飞②
36	HTML炫酷烟花①
37	HTML炫酷烟花②
38	HTML炫酷烟花③
39	HTML炫酷烟花④
40	HTML炫酷烟花⑤
41	HTML炫酷烟花⑥
42	HTML炫酷烟花⑦
43	HTML炫酷烟花⑧
44	HTML炫酷烟花⑨
敬请期待……

# 写在前面

这是一段用HTML、CSS与JavaScript编写的动态网页代码，旨在呈现一场绚丽的新年烟花秀。当页面加载完成，用户将看到黑色背景下绽放的彩色烟花，伴随着“新年快乐”四个字逐渐由无数光点汇聚而成。整场视觉盛宴融合了粒子系统、动画循环、颜色渐变与路径追踪等技术，既是对节日的祝福，也是一次前端图形编程的艺术实践。

技术需求

多Canvas分层渲染：使用三个元素实现视觉分层——底层绘制烟花轨迹，中层管理粒子运动，顶层用于最终文字成型的高亮显示，避免图形重叠干扰。
粒子系统建模：通过Shard类构建碎片粒子，每个粒子具备位置、速度、颜色、生命周期与目标点，模拟真实烟花爆炸后的扩散与聚拢效果。
火箭发射机制：Rocket类控制烟花弹的飞行路径，包含随机角度、速度与轨迹偏移，到达顶点后触发爆炸，生成大量彩色碎片。
HSL色彩动态控制：利用HSL颜色模式动态生成鲜艳色调，结合光亮值变化实现由暗到亮再渐隐的视觉过渡，增强真实感。
图像像素解析：将“新年快乐”文字渲染为图像后，提取其非透明像素坐标作为粒子目标点，使烟花最终汇聚成字。
插值动画（Lerp）：使用线性插值函数平滑控制粒子大小、速度与位置的变化，避免突兀跳跃，提升动画流畅度。
requestAnimationFrame驱动：采用浏览器原生动画API实现60FPS的流畅循环，确保烟花连续发射与粒子动态更新。
响应式布局：画布尺寸随窗口大小自适应，保证在不同设备上均有良好视觉体验。
事件与内存管理：粒子在完成使命后从数组中移除，防止内存泄漏，维持长期运行性能稳定。
URL参数解析：内置GetRequest函数预留扩展接口，可用于传递自定义参数（如祝福语或颜色主题）。

主要代码

DOCTYPE html>
<html lang="en">
<script>
  var _hmt = _hmt || [];
  (function () {
    var hm = document.createElement("script");
    hm.src = "https://hm.baidu.com/hm.js?c923daf3182a4b0ce01878475080aadc";
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(hm, s);
  })();
script>
 
<head>
  <meta charset="UTF-8">
  <title>新年快乐！title>
head>
<style>
  body {
    margin: 0;
    overflow: hidden;
    background: black;
  }
 
  canvas {
    position: absolute;
  }
style>

……

创作流程

我创作这段代码时，心中只有一个画面：在漆黑的夜空中，一道火光划破寂静，轰然炸开成漫天星雨，最终凝聚成“新年快乐”四个温暖的大字。我想用代码写一封会动的贺卡，不只是展示技术，更是传递情感。

一开始，我决定放弃静态图片或视频，选择用程序实时生成一切。因为真正的烟花，从不会重复相同的轨迹。我希望每一个打开页面的人，看到的都是独一无二的瞬间。于是，我选择了Canvas作为画布，它像一块无限延展的夜空，等待被点亮。

我先从文字入手。我想让烟花最终汇聚成字，而不是简单地写在屏幕上。于是我把“新年快乐”用隐藏的Canvas绘制出来，然后逐像素读取它的轮廓坐标。这些坐标将成为粒子们的“归宿”——每一颗烟花碎片，终将奔向这个目标，像是被某种信念牵引。这个过程让我想到人生中的许多瞬间：我们四散漂泊，历经燃烧与坠落，最终只为抵达某个意义的中心。

接着，我设计了火箭的发射机制。它们从屏幕底部随机位置升空，带着不同的角度与速度，就像人们怀揣各异的梦想奔向天空。我给每枚火箭设置了轻微的弧线轨迹，模拟真实升空时的空气阻力与重力影响。当它飞到最高点，速度由负转正的那一刻，便是爆炸的时机——那一瞬间，70颗碎片如命运般四散，每一片都拥有自己的方向与色彩。

这些碎片的行为是我最花心思的部分。它们不是简单地飞散然后消失，而是先爆炸、再减速、最后朝着文字的像素点缓缓归位。我用HSL色彩模型赋予它们鲜艳的色调，并让亮度随时间逐渐提升，模拟光芒由弱变强的过程。我还加入了线性插值，让所有运动都变得柔和，仿佛宇宙本身在轻轻推动它们。

为了营造氛围，我用了三层Canvas：一层画爆炸，一层管飞行，最上层则负责在粒子抵达目标时点亮像素。这种分层让我可以独立控制每一部分的视觉效果，比如给顶层加上辉光，让文字浮现时如同神启。

整个动画由requestAnimationFrame驱动，像心跳一样持续跳动。我设置了定时生成新火箭，让夜空永远不会冷清。即使某一刻烟花落尽，下一秒又会有新的希望升起。这种无限循环，正是我对新年的理解：旧去新来，生生不息。

最后，我加入了百度统计脚本，不是为了数据，而是想留下一点痕迹——有人曾在这里，看过这场烟火。这不仅仅是一段代码，它是我在数字世界里点燃的一束光，献给所有愿意抬头看夜空的人。