简介：11套基于HTML、jQuery与CSS实现的烟花代码合集，面向前端初学者、网站设计师及网页视觉爱好者，可快速在页面中营造节日或庆典氛围，也可作为canvas动画、事件交互和样式过渡的实战参考。压缩包共59个文件，其中21个js脚本负责粒子轨迹计算、随机参数生成和交互逻辑，12个html页面搭建展示结构与运行入口，4个css样式表控制颜色、透明度和动画过渡，再配合png图片、json配置等资源，整体仅4.6MB，轻量易用。当前已有2983人参与学习下载，覆盖了从简单canvas模拟到函数封装的不同实现层次。每套代码实现思路各有侧重：有的完全用JavaScript绘制烟花的升空、爆炸与消散，有的基于HTML5 canvas逐帧渲染粒子系统，有的结合CSS3的transform和transition模拟绽放过程，甚至通过keyframes定义连续动画；通过对照研读，可以系统掌握canvas绘图基础、jQuery事件与动画API、requestAnimationFrame流畅循环、随机数物理模拟、性能优化及多屏适配等关键技能，适合逐步改造并整合进个人或商业项目。

1. 为什么“烟花代码”会有11种写法：先搞清楚你要的是哪种烟花

碰到节日想给页面加点气氛，搜“烟花代码”总会翻到类似标题的合集。这类合集本质上是同一件事——用Html、jQuery、css这些前端手段，把烟花爆炸拆成升空、炸开、拖尾、熄灭几个阶段，然后每种实现方式各写一套。于是同一个效果，有的版本打开是深色画布、鼠标一点就开花；有的版本纯css就能自己循环播放；还有的版本需要先引入一个jQuery文件才能跑。问题往往出在这里：你复制到的代码可能依赖老版本库、可能打开就是白屏、可能粒子一多就卡成幻灯片。这篇笔记的目标很直接：把“烟花代码”背后的实现方式拆开讲清楚，让你到手一套能跑、能改、能移植到自己页面里的方案，也让你以后再看到这类合集时，一眼能判断该选哪一份。适合想把页面做得有记忆点、但不想花太多时间在前端细节上的读者。

2. 从渲染原理看选型：canvas、CSS动画、jQuery DOM操作各自的边界

2.1 三种实现方式各自的渲染路径

先看它们到底在浏览器里做了什么，这决定了你该选哪一套。

canvas 方案是“像素级绘制”。画布上没有一个真实的DOM节点，所有烟花粒子都是你手动算坐标、画圆点。它最大的优势是粒子数量可控、性能上限高。一个canvas上同时存在几百个粒子，每帧只要重绘一遍画布，浏览器不需要管布局和样式，自然跑得动。代价是它不认识“点击”“文字”这些页面概念，你要自己在坐标上做命中判断，要在画布上写字也得用fillText。

CSS 动画方案是“样式级动效”。爆炸火花是真实的DOM元素（比如span或i标签），用transform、opacity、animation控制它们从中心飞散。因为现代浏览器会把transform和opacity动画交给GPU合成，不需要回流和重绘整个页面，所以少量粒子的CSS烟花非常流畅。代价是：写死方向、写死半径，随机性很难做；想炸出50个方向就要写50条nth-child规则，代码量会失控。

jQuery DOM 操作方案是“元素级移动”。每个火花都是一个div或span，用.animate()改变left、top、opacity。它的优点是想放什么内容都行——汉字、图标、小表情都能当烟花粒子飞出去；缺点是DOM一多就触发大量reflow，页面帧率会迅速掉下来，所以只适合10～20个粒子的“小烟花”，不适合满天星。

2.2 选型判断表：你手头的场景该用哪一套

我做这类效果时一般先问自己三个问题：粒子多不多、要不要文字、跑在什么设备上。答案组合起来基本就定了。

判断一份合集里的代码属于哪类实现，不用看完整文件。打开HTML源码，找三个特征：script里有没有getElementById("canvas")或者ctx.beginPath——有就是canvas；样式表里有没有大量@keyframes关键帧、nth-child——有就是纯CSS动画；脚本里有没有$("

2.3 为什么合集会同时收录11套：不是重复，是边界不同

经常有人问：一个烟花效果，做一套不就完了？实际上“一套”只能覆盖一类场景。纯CSS那套适合塞进不加载任何JS的静态页面；canvas那套适合做整页背景；jQuery那套只有一个文本数组就能改成“新年快乐”四个字飞出去。合集的价值在于：同一套爆炸逻辑，换一种载体，适用的页面和交互方式就完全不同。所以标题里写“总有一款是你喜欢的”，不是营销话术，是真的每种实现都有人需要。你只需要从本文往下找到和你场景最像的那一款，改参数即可。

3. 用canvas把烟花从零跑起来：最小可复现代码与参数说明

3.1 一套可直接运行的canvas烟花

下面这份是完整可运行的HTML文件，复制保存为fireworks.html，双击打开就是一朵朵自动升空爆炸的烟花，点击页面任意位置也会在点击处炸一朵。我刻意把代码控制到最小规模，方便你看清一条烟花的完整生命周期。

<!doctype html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <title>canvas 烟花最小实现</title> <style> html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; background: #0a0e1a; } canvas { display: block; } </style> </head> <body> <canvas id="fireworks"></canvas> <script> var canvas = document.getElementById('fireworks'); var ctx = canvas.getContext('2d'); var W = canvas.width = window.innerWidth; var H = canvas.height = window.innerHeight; var particles = []; var MAX_PARTICLES = 600; // 从底部发射一颗升空烟花 function launch(fromX, fromY) { var p = { x: fromX, y: fromY, vx: (Math.random() - 0.5) * 0.8, vy: -7 - Math.random() * 4, // 初速度向上，负值越大升得越高 targetY: fromY - 140 - Math.random() * 200, // 爆炸点的目标高度 type: 'rise' }; particles.push(p); } // 在指定位置爆炸，生成一圈火花 function explode(x, y) { var count = 40 + Math.floor(Math.random() * 30); // 火花数量 for (var i = 0; i < count; i++) { var angle = Math.random() * Math.PI * 2; var speed = 1.5 + Math.random() * 3.5; particles.push({ x: x, y: y, vx: Math.cos(angle) * speed, vy: Math.sin(angle) * speed, life: 50 + Math.floor(Math.random() * 30), // 火花寿命，单位帧 color: 'hsl(' + Math.floor(Math.random() * 360) + ', 90%, 60%)', type: 'spark' }); } } function tick() { // 用半透明背景覆盖，留下上一帧残影形成拖尾 ctx.fillStyle = 'rgba(10, 14, 26, 0.22)'; ctx.fillRect(0, 0, W, H); for (var i = particles.length - 1; i >= 0; i--) { var p = particles[i]; p.x += p.vx; p.y += p.vy; if (p.type === 'spark') { p.vy += 0.06; // 重力，让火花走抛物线 p.life -= 1; if (p.life <= 0) { particles.splice(i, 1); continue; } ctx.globalAlpha = Math.max(0, p.life / 60) * 0.9; ctx.beginPath(); ctx.arc(p.x, p.y, 1.5, 0, Math.PI * 2); ctx.fillStyle = p.color; ctx.fill(); } else if (p.y <= p.targetY) { // 升空到位，炸开 explode(p.x, p.y); particles.splice(i, 1); } else { ctx.globalAlpha = 1; ctx.beginPath(); ctx.arc(p.x, p.y, 2, 0, Math.PI * 2); ctx.fillStyle = '#ffd27a'; ctx.fill(); } } ctx.globalAlpha = 1; requestAnimationFrame(tick); } // 点击页面任意位置，在鼠标处发射 canvas.addEventListener('click', function (e) { launch(e.clientX, e.clientY); }); // 每 1.2 秒自动从底部随机位置发射一朵 setInterval(function () { if (particles.length > MAX_PARTICLES) return; launch(Math.random() * W, H + 5); }, 1200); tick(); window.addEventListener('resize', function () { W = canvas.width = window.innerWidth; H = canvas.height = window.innerHeight; }); </script> </body> </html>

这段代码的逻辑可以拆成三段看。第一段是发射升空，launch创建了一个rise粒子，初始位置在页面底部，vy是向上的负速度，targetY是它爆炸的目标高度。第二段是爆炸，explode在升空粒子到达targetY时被调用，它按随机角度生成一圈火花，每个火花有自己的速度和寿命。第三段是逐帧更新，tick函数用requestAnimationFrame驱动，每帧先刷新背景，再更新所有粒子的位置、重力和生命周期，最后把粒子画到画布上。

几个关键参数直接决定了烟花好不好看。vy在-7到-11之间时，升空速度比较自然，太低会显得烟花很矮，太高会快得看不清轨迹。targetY的爆炸高度我设为从发射点往上140到340像素，这个区间适合多数屏幕。火花的count是40到70个，太少炸开不饱满，太多在低端机上会吃力。speed是火花初始速度，1.5到5这个范围炸开半径大约覆盖60到120像素。life是火花存活帧数，50到80帧配合重力0.06，拖尾和抛物线效果最接近真实烟花。最后一个需要多说的是背景填充rgba(10, 14, 26, 0.22)，透明度越低拖尾越长，越高拖尾越短，0.2左右是经验值。

3.2 只保留自动播放，或只保留点击触发

如果你要把它挂到博客上默默播放，不想让用户点击才出效果，就把click事件监听那两行删掉，保留setInterval自动发射。反过来，如果你想做成“用户点哪里哪里炸”，就把setInterval整段删掉，只保留点击事件。我通常两种都保留，因为自动播放负责氛围，点击触发负责互动，用户不会觉得页面死板。

注意：点击触发有个前提——canvas铺满全屏时，点击事件是canvas在接收。如果你把它嵌到一个已有页面里，铺满的canvas会挡住下层按钮的点击。这个问题在第5章和第6章会专门讲解决方案，核心思路是让canvas不拦截鼠标事件。

3.3 控制粒子总数：防止内存和帧率一起崩

上面代码里有MAX_PARTICLES这个常量，当粒子总数超过600时，新launch会被拒绝。很多人第一次写canvas烟花时容易忽略这个，自动播放30秒后页面突然卡顿，就是因为粒子数组里堆了几千个对象，每次tick都要全部遍历并重新绘制。600的上限是桌面端和移动端都比较安全的数值，如果你做的效果火花量特别大，可以把上限放宽到1000，但建议同时把花火的单个半径缩小一点，减少像素填充量。

4. 不止canvas：纯CSS爆炸动画与jQuery文字烟花的可替换方案

4.1 纯CSS实现爆炸火花：固定方向、靠延迟制造层次

纯CSS烟花的思路和canvas完全不同：火花是真实DOM元素，爆炸是一个从中心向外飞散的transform动画。优点是代码不需要任何JS就能循环播放，适合放在静态页面顶部或H5邀请函里当氛围装饰；缺点是不好做随机，方向是写死的。

下面这套是我常用的“8方向双层火花”做法，HTML里放一个容器，CSS负责升空和爆炸两个阶段，用animation-delay衔接：

<div class="cfw" id="cfw1"></div>

.cfw { position: fixed; left: 50%; top: 65%; width: 0; height: 0; } .cfw .fire-line { position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; border-radius: 50%; background: #ffd27a; opacity: 0; animation: fireRise 1.1s ease-out forwards, firePop 0.9s ease-out forwards; animation-delay: 0s, 1.1s; } .cfw .spark { position: absolute; left: -2px; top: -2px; width: 4px; height: 4px; border-radius: 50%; background: var(--c); opacity: 0; animation: firePop 0.85s ease-out forwards; animation-delay: var(--d); transform: rotate(var(--deg)) translateX(0); } @keyframes fireRise { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 1; transform: translateY(-240px); } } @keyframes firePop { 0% { opacity: 1; transform: rotate(var(--deg)) translateX(0) scale(1); } 100% { opacity: 0; transform: rotate(var(--deg)) translateX(72px) scale(0.4); } }

关键点在firePop这个关键帧：它同时使用了rotate和translateX，而且rotate必须写成一个固定角度，否则动画过程中角度会被重置，火花会全部飞到同一个方向去。deg、d、c这几个CSS变量是在生成火花DOM时通过style赋值的，方向一样、延迟不同，炸开时就有了先内圈后外圈的层次感。

生成火花DOM的过程我用一小段JS来做，因为纯手写16个div太蠢了：

var container = document.getElementById('cfw1'); var colors = ['#f66', '#fc6', '#6c9', '#69f', '#f9f', '#ff8']; for (var i = 0; i < 16; i++) { var spark = document.createElement('span'); spark.className = 'spark'; var deg = i * 22.5; // 360度均分16个方向 var dist = i % 2 === 0 ? 72 : 52; // 内外两圈交替 spark.style.setProperty('--deg', deg + 'deg'); spark.style.setProperty('--d', (1.1 + (i % 2) * 0.08) + 's'); spark.style.setProperty('--c', colors[i % colors.length]); container.appendChild(spark); }

这段JS只做了DOM生成这件事，动画全程仍然由CSS接管。每个spark的animation-delay都大于1.1秒，正好等fire-line升空到位后才开始炸。translateX距离72px是外圈半径，52px是内圈半径，想炸得大就调这两个值。实际用下来，这种纯CSS的方案在移动端表现非常稳定，因为全程只有transform和opacity两种属性在变化，浏览器可以走GPU合成通道。

4.2 jQuery文字烟花：让“新年快乐”四个字飞出去

jQuery方案在合集中的存在意义和canvas完全不同，它能直接把文字当烟花放。原理很简单：点击时创建几个span，每个span装一个字符，然后利用jQuery的.animate同时改变left、top和opacity，动画结束后把DOM移除。

$(document).on('click', function (e) { var chars = ['新', '年', '快', '乐']; var colors = ['#ff6b6b', '#ffa94d', '#69db7c', '#4dabf7']; chars.forEach(function (ch, i) { var $spark = $('<span>').text(ch).css({ position: 'fixed', left: e.clientX, top: e.clientY, fontSize: '30px', fontWeight: 'bold', color: colors[i], zIndex: 9999 }).appendTo('body'); var angle = -Math.PI / 2 + (i - 1.5) * 0.45; // 向上的扇形散开 var distance = 90 + i * 15; var targetLeft = e.clientX + Math.cos(angle) * distance; var targetTop = e.clientY + Math.sin(angle) * distance; $spark.animate({ left: targetLeft, top: targetTop, opacity: 0 }, 850 + i * 60, function () { $(this).remove(); }); }); });

这段代码里，每个字符对应一个扇形方向，四个字彼此错开15度左右，飞出去时不会叠在一起。distance是90到135像素，落点不会太近也不会飘出屏幕。animate的时长是850毫秒加索引偏移，四个字不是同时消失，而是依次淡出，看起来更像一次有层次的溅射。最后一个细节是动画结束后的remove回调，老合集里很多jQuery烟花跑完不清理DOM，点几次之后body里堆积了几十个无用的span，页面越来越卡，这个坑后面还会展开。

4.3 三种方式怎么配合：一个页面完全可以一主一辅

不用非选一种。我见过比较舒服的用法是：整页背景交给canvas跑大粒子烟花，页面正中央再来一个jQuery文字烟花，点击时先弹出“新年快乐”字样，背景再补一圈彩色火花。两个方案各管各的渲染层，互不干扰。canvas负责氛围密度，jQuery负责重点信息，CSS那套则适合在不需要交互的局部区域做固定装饰。只要别让两套方案的粒子总量同时拉满，页面完全扛得住。

5. 让合集真正能用的5个避坑记录：从粒子索引错位到低端机掉帧

5.1 背景越跑越亮，最后白屏一片

现象：页面开了一会儿后，整个canvas背景从深色慢慢变成灰白，最后火花全部看不清，只剩一片亮色。

原因：这是拖尾实现的经典翻车。前面最小实现里，拖尾是靠每帧用半透明背景覆盖旧画面实现的，rgba(10, 14, 26, 0.22)每次只盖22%的不透明度。但如果火花颜色过于明亮、粒子数量又多，残影叠加的速度会超过背景覆盖的速度，画面亮度就会逐步累积。在浅色页面里这个问题尤其明显。

解决：深色背景方案把背景颜色的alpha降到0.15到0.25之间，同时把火花颜色的亮度压低，比如用hsl(色相, 80%, 60%)而不是90%亮度。如果你的页面背景是白色，不要用拖尾叠加方案，直接改成每帧clearRect清屏，再给每个火花维护一个位置数组来画小拖尾，而不是靠半透明叠加。另一种思路是定期把背景完全重绘一次，比如每60帧做一次全量覆盖，打断残影的累积。

5.2 forEach里splice，火花莫名跳变或消失

现象：同一朵烟花里，有的火花飞到一半突然消失，有的火花看起来像在闪烁跳动，还有人反馈“爆炸的花火个数不稳定，有时候多有时候少”。

原因：这是遍历数组时删除元素造成的索引错位。很多人写粒子更新时习惯用forEach，在遍历过程中调用particles.splice(i, 1)，可forEach的回调里拿到的index是基于原始数组的。splice删除一个元素后，后续所有元素的下标都会前移，循环继续走旧下标就会跳过真实的下一个粒子，表现就是粒子数量变少、运动不连续。

解决：遍历粒子数组时使用倒序for循环，从数组末尾往头遍历，这样splice(i, 1)删除的元素总是在当前位置之后已经处理过的区域，不会影响还没遍历的元素。这是canvas粒子系统里最基本的血泪经验，凡是你在网上看到“粒子会跳”的反馈，十有八九都是这里出了问题。

5.3 高分屏上canvas模糊，点击坐标还偏了

现象：同一份代码，在普通屏上正常，在Retina屏上画面发虚，点击鼠标时烟花总会偏离手指或鼠标位置一段距离。

原因：canvas的width和height属性是绘图缓冲区的大小，而CSS样式里的宽高是显示大小。高分屏的devicePixelRatio大于1，如果不做处理，浏览器会拿低分辨率的绘图缓冲去适配高分辨率的显示区域，画面自然模糊。点击坐标偏位则是因为事件坐标是CSS像素，而你在绘制时如果用缓冲区像素做运算，两者没有对齐。

解决：创建画布时把物理像素尺寸设置到缓冲区，CSS尺寸保持逻辑像素，再对绘图上下文做一次scale：

var dpr = window.devicePixelRatio || 1; var W = window.innerWidth, H = window.innerHeight; canvas.width = W * dpr; canvas.height = H * dpr; canvas.style.width = W + 'px'; canvas.style.height = H + 'px'; ctx.scale(dpr, dpr);

之后所有坐标运算都按照逻辑像素来，鼠标点击的e.clientX、e.clientY可以直接使用，不会再偏。

5.4 纯CSS火花在低端安卓机上卡成一帧一帧

现象：同样的CSS烟花，在iPhone上很流畅，在千元安卓机上就变成幻灯片，火花轨迹一卡一卡的。

原因：低端机的GPU合成能力弱，对大量box-shadow和filter的动画处理性能很差。纯CSS烟花如果设计时用了多组box-shadow来做光晕、用了blur滤镜做模糊，这些属性每帧变化都会触发大量像素填充，是最耗性能的组合。

解决：粒子动画只使用transform和opacity两个属性，它们走合成器通道，不触发layout也不触发重绘。光晕效果不要用box-shadow打多层点，而是用一个放大后淡出的半透明圆形div模拟冲击波，这就是常说的“涟漪光圈扩散”做法，视觉效果接近但性能开销小很多。另外把火花粒子数量控制在12个以内，方向间距可以加大，牺牲密度换流畅度。

5.5 自动发射的烟花没控制总数，10分钟后彻底卡死

现象：页面挂着不动，过十分钟后再点，整个页面几乎无法响应，DevTools里的内存占用持续上升。

原因：自动播放的setInterval一直在创建新粒子，如果代码里没有总量上限，粒子数组会无限增长。每一次tick都要遍历所有粒子来更新和绘制，数组越大每帧耗时越长，最终帧率趋近于零。更隐蔽的是，某些合集的canvas实现只负责画、不负责删，粒子life耗尽后只是不再绘制，但对象仍然留在数组里继续被遍历。

解决：两层保险。第一层，每次launch前判断particles.length是否超过最大值，超了就拒绝新粒子。第二层，粒子生命周期结束时的splice不能省，同时要是担心数组碎片过多，可以在超过上限时直接批量截断：particles.splice(0, particles.length - MAX)。这样虽然旧粒子会闪一下消失，但至少页面不会崩。

6. 把烟花接到你的页面上：参数优化、点击交互与移动端适配

6.1 一份参数速查表：调出不同的“烟花性格”

花火不是越大越好看，有的页面需要“细碎小烟花”，有的需要“饱满大花”。下面这张表是常用参数和它们的性格影响，照着改就行。

一版我比较推荐的“饱满型”配置是vy=-10、targetY=-300、count=70、speed=4.5、life=80、alpha=0.15。这一套在深色背景的博客首页上非常出片。如果是移动端H5，把count降到45、speed降到3、alpha提到0.25，减少粒子总量保住帧率。

6.2 嵌入已有页面时，三层关键设置

要把canvas烟花挂到已有页面上，最干净的方式是用一个独立的fixed覆盖层，不要直接往body里塞canvas。覆盖层要同时设置z-index和pointer-events：

#fireworks-layer { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9998; pointer-events: none; } #fireworks-layer canvas { width: 100%; height: 100%; }

pointer-events: none这一行是关键。没有它，铺满全屏的canvas会拦截掉页面上所有点击事件，用户连按钮都点不了。设置之后，鼠标事件会穿透canvas落到下层真实的页面上。同时把click监听从canvas上移到document上，这样用户点页面任意位置都触发烟花，又不会影响按钮、链接的正常功能。注意监听document时要用e.clientX和e.clientY来取坐标，这两个值在canvas的坐标系里是通用的。

6.3 页面切到后台时暂停发射，回来再恢复

手机浏览器进入后台后，requestAnimationFrame会被自动暂停，但setInterval不会。如果页面切后台五分钟再回来，定时器会在这期间积累大量回调，一恢复就猛炸几十朵，直接卡顿。处理方式很简单，监听visibilitychange事件：

var autoTimer = null; function startAutoLaunch() { if (autoTimer) return; autoTimer = setInterval(function () { if (particles.length > MAX_PARTICLES) return; launch(Math.random() * W, H + 5); }, 1200); } function stopAutoLaunch() { clearInterval(autoTimer); autoTimer = null; } document.addEventListener('visibilitychange', function () { if (document.hidden) { stopAutoLaunch(); } else { startAutoLaunch(); } });

把原来的setInterval改造成可启动、可停止的结构，切后台停掉，回到前台再恢复。这里还有一个顺手的小优化：页面刚加载时不要立刻发射，等300毫秒再开，避免首屏性能竞争导致页面打开瞬间掉帧。

我自己的一个教训是把这层canvas直接铺在业务页面上，忘了加pointer-events: none，结果上线后用户反馈“页面所有按钮都点不动”，排查了半小时才发现是烟花层挡住了。后来我习惯性地把覆盖层、canvas、事件监听三层结构固定成一个模板，每次做类似效果直接套用，很少再翻车。这大概就是这类“代码合集”真正该沉淀下来的东西——不只把效果跑通，还把边界和坑一起传下去。希望帮到你。

本文还有配套的精品资源，点击获取