HTML怎么做粒子效果_html粒子动画背景实现教程【全面解析】-html教程-PHP中文网

纯html无法实现真粒子效果，必须用canvas+javascript；css动画预设轨迹、dom模拟卡顿，唯canvas+requestanimationframe+向量运算可行。

html怎么做粒子效果_html粒子动画背景实现教程【全面解析】

纯 HTML 无法实现粒子效果——它没有绘图能力，也不支持实时计算。所有“HTML 粒子背景”实际都依赖 canvas + JavaScript，HTML 只是容器。

为什么不能只用 HTML 或 CSS 做真粒子动画

CSS 动画（如 @keyframes）只能预设轨迹，无法让成百上千个点实时响应鼠标、碰撞、衰减或物理加速度；HTML 标签（比如一堆 <div>）强行模拟粒子会导致 DOM 节点爆炸，100 个以上就明显卡顿，60fps 几乎不可能。<p>真正可用的方案只有：<code>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  canvas.width,
y: Math.random()  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();

});

// 连线逻辑（两两距离 dx + dy dy); if (dist 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) 动态计算，避免硬编码

常见翻车现场和对应解法

你照着抄完发现不动、卡死、连线乱飞、缩放错位？大概率掉进这些坑：

html-ppt-to-pdf

将使用 `

` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

下载

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 粒子 + 连线 + 物理计算，低端机帧率骤降。对策：