3款网页粒子特效与动态背景库

不少页面的首屏看起来高级，靠的就是背景里流动的渐变和飘动的粒子。这些效果自己用 canvas 从头写，描点、连线、算速度、处理窗口变化，写下来一大摊，性能还容易崩。这次整理了 3 款开源免费可商用的前端特效库，粒子背景和动态渐变都能直接拿来用，纯前端文件，引进去就有效果，省掉从零造轮子的时间。

三款库分别负责什么

tsParticles 是粒子特效里功能最全的一款，连线、雪花、星空、彩带都能做，自带三十多种预设，改一段 JSON 配置就能换风格，还支持把粒子做成可点击的交互效果。particles.js 更轻更经典，配置一段 JSON 就能生成连线粒子，接口简单，很多老项目都在用它。granim.js 做的是另一种东西，动态渐变动画背景，支持多色流动渐变，适合放在首屏大图和横幅上。

怎么用

这三款都需要在页面里先放一个容器元素，把库引进来后指向这个容器，再给一段配置就出效果。tsParticles 和 particles.js 的配置项很多，但常用的就那几项，密度、速度、颜色、透明度，照着官方示例改最快。granim 只要给几个颜色值和渐变方向，它自己会把过渡播起来。包里的使用说明文件有每个库的定位介绍，各库文件夹里保留了对应的 README 和许可文件。

性能上的提醒

粒子特效最怕的就是开太多、铺太满，手机上很容易掉帧。实际用的时候把粒子数量、连线距离往下压一压，或者只在首屏可见时启动，滚出屏幕就暂停，体验会稳很多。tsParticles 支持按设备能力自动降配，particles.js 则需要自己判断一下屏幕宽度。渐变背景基本不吃性能，可以放心用在比较长的页面上，把它当底色配粒子，画面也会更耐看。

三款库加起来只有一百多 KB，对页面加载几乎没有压力，适合放在落地页、个人站和产品首屏。许可都是 MIT，商用和修改都不需要额外授权，保留各自的 LICENSE 文件即可。解压后引用对应 js 就能用，参数都在配置文件里，改起来很直观，不想调太多的话直接套用自带的预设也能出不错的效果。