昨儿半夜刷短视频，看见个贼炫酷的网页特效，鼠标移上去能炸烟花那种，我这手痒的毛病又犯了，心说我也整一个！结果搜了一圈教程，不是要掏钱买源码就是藏着掖着讲一半，气得我泡面都坨了。干脆自己折腾得了，反正就是点JavaScript的事儿呗。

第一步：翻箱倒柜找免费料

我可不想当冤大头花钱买特效，直奔GitHub这个程序员捡破烂胜地。关键词换成“免费网页特效”、“JavaScript动画库”，哗出来一堆。眼都看花了，扒拉到两个顺眼的：一个专门搞粒子动画的库，就那种满天飘小点儿能跟着鼠标跑的；另一个是现成的烟花爆炸效果，代码包加起来还不到200KB。赶紧点下载，生怕晚一步它跑了似的。

第二步：给网页搭个毛坯房

总不能光秃秃就玩特效？新建个HTML文件，敲几行基本架子：

• 先用div画了个黑底的大框当舞台，高度设100%占满屏幕；
• 接着在head里把刚薅来的两个JS文件拽进来，路径可不敢写错；
• 3塞了个h1标题写着“点我放烟花！”，好歹像个正经页面。

保存后用浏览器打开一看，好家伙，漆黑一片就一行白字，跟闹鬼似的。

第三步：给代码念咒语

翻出烟花效果的JS文件，里面密密麻麻全是洋文。硬着头皮找到关键部位：初始化函数后面空荡荡的。把粒子动画库的名字填进去当参数，这俩货总算接上头了。还在标题标签上绑了个鼠标点击事件：onclick="launchFirework()"。保存刷新，小心翼翼点了一下标题——卧槽！真炸了！彩色粒子哗从屏幕顶往下掉，就是位置歪到姥姥家了。

第四步：逼特效听话

炸是炸了，但烟花总往屏幕左边飘算怎么回事？打开开发者工具边调边骂：

• 找到控制爆炸位置的x,y参数，改成当前鼠标坐标；
• 粒子飞溅速度调低到0.8，不然刷一下就没了；
• 给背景div加了个z-index:-1，防止标题被烟花盖住。

折腾完再试，这回烟花精准在鼠标点击的地方炸开，金色红色粒子慢悠悠散开，泡面汤滴到键盘上都顾不上擦。

翻车实录

本来想再加个粒子随鼠标流动的效果，结果刚把第二个库的代码粘贴进去，整个页面突然抽搐起来。烟花和粒子像抽风似的互相打架，标题都抖出残影了。查了半天才发现俩库的动画函数重名了，只能把其中一个改名叫“myCrazyParticle()”，世界终于清净了——然后发现电脑死机了！写了大半宿的记录没保存！淦！

早上睁眼第一件事就是重写记录，键盘敲得火星子直冒。现在回想起来，免费资源虽香也得看兼容性，代码备份比写注释还重要。对了，那个修好的烟花页面让我家猫踩了一脚键盘，现在满屏炸烟花停不下来，算不算另类压力测试？