网页粒子动画效果如何做

登录页、活动页经常要一层「会动」的底：许多小点慢慢漂，靠近的两点之间拉出细线，鼠标移动时点还会轻轻跟着偏。本例用 jQuery 插件 Particleground 画在整页 body 上，底色 #16a085，点和线 #5cbdaa。

粒子动画需要哪些文件一起工作

顺序不能反：先 jQuery，再 Particleground.js，最后 particle.js。jQuery 掉到后面，$ 和 particleground 都会挂。插件会自己往挂载节点里插入一块 canvas，页面里不必手写 。

整页粒子动画如何铺开

html、body 高度都写成 100%，底色铺在 body 上。overflow: hidden 避免粒子画布把页面撑出滚动条。启动时对 body 调用 particleground，画布会铺满当前窗口，窗口尺寸变化时插件会跟着重算。


只想铺在某一块区域，把选择器改成该容器的 id 或 class，并给容器定高；高度为 0 时看不见粒子。我第一次看也卡了一下：只给 body 写了高度，忘了 html，有的浏览器里画布高度对不上窗口。

粒子点和连线的颜色怎么定

两个色值分开写：dotColor 是点的填充色，lineColor 是两点靠近时那根线的颜色。本例都写成 #5cbdaa，和青绿底接近，看起来是一层薄纱。底深、点浅，或底浅、点深，对比会更清楚。

particleRadius 控制点的大小，本例 7。proximity 是开始连线的距离，单位像素，100 表示两点靠近到这个范围才拉线；调大则线更多、画面更密。

粒子疏密和移动快慢如何调

疏密看 density：数值越小，同样面积里点越多。本例 10000，和插件默认一致。想更热闹可改成 6000，想更干净可改成 16000。太密会拖性能，尤其笔记本核显。

快慢看四组速度：minSpeedX / maxSpeedX、minSpeedY / maxSpeedY。本例横向、纵向都是最小 0.1、最大 0.7。数字越大漂得越快，太大像在飞，不像背景。

parallax 为 true 时，鼠标移动点会分层轻轻偏移，立体一点。不需要跟手，改成 false。

页面正文如何叠在粒子动画上面

插件把 canvas 插到 body 最前面，后面的内容默认可能被盖住或不好点。给正文包一层 .pg-content，position: relative 且 z-index 高于画布，标题、按钮就能叠在粒子上，点击也不会点穿到空白画布上。


登录表单、活动主标题都放进这一层。底色、点线色、density 按视觉规范改；文案和按钮链接换成业务自己的即可。