登录页、活动页经常要一层「会动」的底许多小点慢慢漂靠近的两点之间拉出细线鼠标移动时点还会轻轻跟着偏。本例用 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-contentposition: relative 且 z-index 高于画布标题、按钮就能叠在粒子上点击也不会点穿到空白画布上。登录表单、活动主标题都放进这一层。底色、点线色、density 按视觉规范改文案和按钮链接换成业务自己的即可。