系列文章
序号 | 目录 |
|---|---|
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分层渲染：使用三个
<canvas>元素实现视觉分层——底层绘制烟花轨迹，中层管理粒子运动，顶层用于最终文字成型的高亮显示，避免图形重叠干扰。 - 粒子系统建模：通过
Shard类构建碎片粒子，每个粒子具备位置、速度、颜色、生命周期与目标点，模拟真实烟花爆炸后的扩散与聚拢效果。 - 火箭发射机制：
Rocket类控制烟花弹的飞行路径，包含随机角度、速度与轨迹偏移，到达顶点后触发爆炸，生成大量彩色碎片。 - HSL色彩动态控制：利用HSL颜色模式动态生成鲜艳色调，结合光亮值变化实现由暗到亮再渐隐的视觉过渡，增强真实感。
- 图像像素解析：将“新年快乐”文字渲染为图像后，提取其非透明像素坐标作为粒子目标点，使烟花最终汇聚成字。
- 插值动画（Lerp）：使用线性插值函数平滑控制粒子大小、速度与位置的变化，避免突兀跳跃，提升动画流畅度。
- requestAnimationFrame驱动：采用浏览器原生动画API实现60FPS的流畅循环，确保烟花连续发射与粒子动态更新。
- 响应式布局：画布尺寸随窗口大小自适应，保证在不同设备上均有良好视觉体验。
- 事件与内存管理：粒子在完成使命后从数组中移除，防止内存泄漏，维持长期运行性能稳定。
- URL参数解析：内置
GetRequest函数预留扩展接口，可用于传递自定义参数（如祝福语或颜色主题）。
主要代码
<!DOCTYPEhtml><htmllang="en"><script>var_hmt=_hmt||[];(function(){varhm=document.createElement("script");hm.src="https://hm.baidu.com/hm.js?c923daf3182a4b0ce01878475080aadc";vars=document.getElementsByTagName("script")[0];s.parentNode.insertBefore(hm,s);})();</script><head><metacharset="UTF-8"><title>新年快乐！</title></head><style>body{margin:0;overflow:hidden;background:black;}canvas{position:absolute;}</style>……创作流程
我创作这段代码时，心中只有一个画面：在漆黑的夜空中，一道火光划破寂静，轰然炸开成漫天星雨，最终凝聚成“新年快乐”四个温暖的大字。我想用代码写一封会动的贺卡，不只是展示技术，更是传递情感。
一开始，我决定放弃静态图片或视频，选择用程序实时生成一切。因为真正的烟花，从不会重复相同的轨迹。我希望每一个打开页面的人，看到的都是独一无二的瞬间。于是，我选择了Canvas作为画布，它像一块无限延展的夜空，等待被点亮。
我先从文字入手。我想让烟花最终汇聚成字，而不是简单地写在屏幕上。于是我把“新年快乐”用隐藏的Canvas绘制出来，然后逐像素读取它的轮廓坐标。这些坐标将成为粒子们的“归宿”——每一颗烟花碎片，终将奔向这个目标，像是被某种信念牵引。这个过程让我想到人生中的许多瞬间：我们四散漂泊，历经燃烧与坠落，最终只为抵达某个意义的中心。
接着，我设计了火箭的发射机制。它们从屏幕底部随机位置升空，带着不同的角度与速度，就像人们怀揣各异的梦想奔向天空。我给每枚火箭设置了轻微的弧线轨迹，模拟真实升空时的空气阻力与重力影响。当它飞到最高点，速度由负转正的那一刻，便是爆炸的时机——那一瞬间，70颗碎片如命运般四散，每一片都拥有自己的方向与色彩。
这些碎片的行为是我最花心思的部分。它们不是简单地飞散然后消失，而是先爆炸、再减速、最后朝着文字的像素点缓缓归位。我用HSL色彩模型赋予它们鲜艳的色调，并让亮度随时间逐渐提升，模拟光芒由弱变强的过程。我还加入了线性插值，让所有运动都变得柔和，仿佛宇宙本身在轻轻推动它们。
为了营造氛围，我用了三层Canvas：一层画爆炸，一层管飞行，最上层则负责在粒子抵达目标时点亮像素。这种分层让我可以独立控制每一部分的视觉效果，比如给顶层加上辉光，让文字浮现时如同神启。
整个动画由requestAnimationFrame驱动，像心跳一样持续跳动。我设置了定时生成新火箭，让夜空永远不会冷清。即使某一刻烟花落尽，下一秒又会有新的希望升起。这种无限循环，正是我对新年的理解：旧去新来，生生不息。
最后，我加入了百度统计脚本，不是为了数据，而是想留下一点痕迹——有人曾在这里，看过这场烟火。这不仅仅是一段代码，它是我在数字世界里点燃的一束光，献给所有愿意抬头看夜空的人。
写在后面
我是一只有趣的兔子，感谢你的喜欢！
