纯CSS变量无法实现Canvas级粒子轨迹。它仅能存储静态值，不支持实时计算、物理模拟或事件响应，所谓“CSS粒子动画”实为预设关键帧的DOM模拟，性能与控制力远逊Canvas。
纯CSS变量无法实现Canvas级粒子轨迹
不能。CSS变量本身只是值的容器，不参与计算或状态更新，更不具备Canvas那种每帧重绘、逐粒子控制位置/透明度/速度的能力。你看到的“CSS粒子动画”，实际是靠大量预设@keyframes + DOM元素模拟出来的静态路径，本质是时间轴上的位移快照，不是实时演算的物理轨迹。
为什么用CSS变量做粒子轨迹会失败
常见误区是以为给--x、--y设个初始值，再用transform: translate(var(--x), var(--y))就能动起来——但CSS变量不会自动变化，必须配合JavaScript手动修改，此时已脱离“纯CSS”范畴；而一旦引入JS，不如直接用Canvas，性能和控制力都强得多。
- 浏览器不监听CSS变量变更触发重排/重绘，需显式调用
element.style.setProperty() - 每个粒子要一个DOM节点，50个粒子就是50个
<div>，内存和渲染开销远超Canvas单画布 <li>无法实现阻力、重力、碰撞反弹等连续物理计算，<code>cubic-bezier()只能拟合固定曲线 - 鼠标点击生成新粒子？CSS无事件响应能力，必须靠JS绑定
click再动态插入元素
真想用CSS变量，只适合静态路径动画
如果你只要“看起来像粒子飞过”的装饰性效果（比如首页加载时几条固定轨迹的光点），可以用CSS变量配合animation做有限控制：
.particle {
--x0: 100px;
--y0: 200px;
--x1: 300px;
--y1: 150px;
--x2: 500px;
--y2: 250px;
position: absolute;
width: 4px;
height: 4px;
background: #fff;
animation: fly 2s ease-in-out forwards;
}
@keyframes fly {
0% { transform: translate(var(--x0), var(--y0)); opacity: 1; }
50% { transform: translate(var(--x1), var(--y1)); opacity: 0.7; }
100% { transform: translate(var(--x2), var(--y2)); opacity: 0; }
}
这种写法仅适用于路径明确、数量极少（≤10）、无需交互、不随鼠标实时生成的场景。变量在这里只是避免重复写死数值，没带来任何运行时能力提升。
立即学习“前端免费学习笔记（深入）”；
真正需要轨迹控制时，别绕弯
Canvas的requestAnimationFrame循环 + 粒子对象数组（含x、y、vx、vy、life）才是正解。CSS变量在粒子系统里唯一合理用途，是作为配置项传入JS：比如把--particle-count: 200读出来初始化数组长度，或用--gravity: 0.1转成JS里的物理参数。但轨迹本身，必须由JS驱动计算，Canvas负责绘制。
