纯HTML无法实现真粒子效果，必须用canvas+JavaScript；CSS动画预设轨迹、DOM模拟卡顿，唯canvas+requestAnimationFrame+向量运算可行。
纯 HTML 无法实现粒子效果——它没有绘图能力，也不支持实时计算。所有“HTML 粒子背景”实际都依赖 canvas + JavaScript，HTML 只是容器。
为什么不能只用 HTML 或 CSS 做真粒子动画
CSS 动画（如 @keyframes）只能预设轨迹，无法让成百上千个点实时响应鼠标、碰撞、衰减或物理加速度；HTML 标签（比如一堆 <div>）强行模拟粒子会导致 DOM 节点爆炸，100 个以上就明显卡顿，60fps 几乎不可能。
真正可用的方案只有：canvas 绘制 + requestAnimationFrame 驱动 + 向量运算（位置/速度/加速度）。
最简可行粒子系统：50 行内跑起来
不用框架，不引库，直接手写一个带鼠标吸附、自动连接、缓慢消散的基础粒子系统：
立即学习“前端免费学习笔记（深入）”；
const canvas = document.getElementById('particle-canvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
<p>const particles = [];
for (let i = 0; i < 80; i++) {
particles.push({
x: Math.random() <em> canvas.width,
y: Math.random() </em> canvas.height,
vx: (Math.random() - 0.5) <em> 0.5,
vy: (Math.random() - 0.5) </em> 0.5,
radius: Math.random() * 1.5 + 0.5,
});
}</p><p>function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
const mouse = { x: canvas.width / 2, y: canvas.height / 2 }; // 先固定中心，后续可绑定 mousemove</p><p>particles.forEach(p => {
p.x += p.vx;
p.y += p.vy;
p.vx <em>= 0.99; // 摩擦力
p.vy </em>= 0.99;</p><pre class="brush:php;toolbar:false;"><pre class="brush:php;toolbar:false;">// 鼠标吸附（距离越近力越大）
const dx = mouse.x - p.x;
const dy = mouse.y - p.y;
const dist = Math.sqrt(dx * dx + dy * dy);
if (dist < 120) {
p.vx += dx * 0.001;
p.vy += dy * 0.001;
}
// 边界反弹
if (p.x < 0 || p.x > canvas.width) p.vx *= -0.8;
if (p.y < 0 || p.y > canvas.height) p.vy *= -0.8;
ctx.beginPath();
ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2);
ctx.fillStyle = '#6b7280';
ctx.fill();});
// 连线逻辑（两两距离<120则画线）
for (let i = 0; i < particles.length; i++) {
for (let j = i + 1; j < particles.length; j++) {
const dx = particles[i].x - particles[j].x;
const dy = particles[i].y - particles[j].y;
const dist = Math.sqrt(dx dx + dy dy);
if (dist < 120) {
ctx.beginPath();
ctx.strokeStyle = rgba(107, 114, 128, ${0.2 - dist / 600});
ctx.lineWidth = 0.5;
ctx.moveTo(particles[i].x, particles[i].y);
ctx.lineTo(particles[j].x, particles[j].y);
ctx.stroke();
}
}
}
requestAnimationFrame(animate); } animate();
关键点：
-
canvas必须设置width/height属性（不是 CSS），否则缩放失真 - 粒子位置用浮点数，
vx/vy控制运动，乘以0.99实现自然减速 - 连线用双重循环，但粒子数超 200 就要改用空间划分（如四叉树）优化
- 透明度用
rgba(r,g,b,a)动态计算，避免硬编码
常见翻车现场和对应解法
你照着抄完发现不动、卡死、连线乱飞、缩放错位？大概率掉进这些坑：
Canvas 未响应窗口缩放：只在初始化设了宽高，但没监听 resize 事件。必须补上：
window.addEventListener('resize', () => {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
});
鼠标坐标没转成 canvas 像素坐标：event.clientX 是视口坐标，canvas 有缩放或 margin 时会偏移。正确做法是用 canvas.getBoundingClientRect() 计算偏移：
canvas.addEventListener('mousemove', e => {
const rect = canvas.getBoundingClientRect();
mouse.x = e.clientX - rect.left;
mouse.y = e.clientY - rect.top;
});
粒子太多导致 CPU 溢出：超过 300 粒子 + 连线 + 物理计算，低端机帧率骤降。对策：
- 把连线距离阈值从
120提到180，减少循环次数 - 每帧只更新 1/3 粒子的位置（用
index % 3 === frameCount % 3分批） - 用
Worker拆分物理计算（但跨线程传数据有开销，慎用）
要不要用三方库？看这三点再决定
像 tsParticles、particles.js 确实省事，但引入前先问自己：
- 是否需要 JSON 配置驱动？如果只是静态背景，手写更轻、可控、无兼容风险
- 是否要支持 IE？
tsParticles已放弃 IE，particles.js的 IE 版本停止维护多年 - 是否要深度定制交互？比如粒子点击爆炸、拖拽聚拢、音频频谱驱动——这些库要么不支持，要么得 hack 源码
真实项目中，80% 的“粒子背景”需求其实只需要 60 行以内 canvas 逻辑。复杂交互才值得引入库，而且得确认它导出的实例能让你拿到粒子数组和更新钩子——否则等于被锁死在配置里。
粒子系统真正的复杂点从来不在“怎么画点”，而在“怎么让点的行为既真实又高效”。边界检测、距离判定、插值缓动、内存复用……这些细节藏在每一帧的 requestAnimationFrame 回调里，看不见，但决定体验上限。
