CSS变量不能直接控制粒子轨迹，因其仅作用于样式层，而粒子运动依赖JavaScript或GPU中实时计算的速度、加速度等运行时数值，需通过代码主动读取并调用API（如setEmissionRate）间接联动。
CSS 变量不能直接控制粒子发射器的运动轨迹。粒子系统（如 Phaser、Cocos Creator、Niagara 或原生 Canvas/WebGL 实现）的轨迹由物理更新逻辑、速度向量、加速度或力场模块实时计算，运行在 JavaScript 或 GPU 着色器中，而 CSS 变量仅作用于样式层，无法影响粒子的 position、velocity、acceleration 等运行时数值。
为什么不能用 --particle-speed 直接驱动轨迹
CSS 变量可被 calc()、transform 或动画属性读取，但粒子位置不是靠 transform: translate() 逐个设置的——那会卡死：1000 个粒子意味着每帧触发 1000 次重排+重绘，且无法模拟真实物理（如重力累加、碰撞反弹）。真实粒子系统依赖 requestAnimationFrame 中的数值积分，CSS 层完全不参与该流程。
常见误用现象：
- 用
style.setProperty('--speed', '200')修改变量，但粒子代码里没读它 → 轨迹毫无变化 - 试图用
@keyframes+transform动画模拟粒子飘动 → 所有粒子走相同路径，无随机性、无生命周期控制 - 把粒子 DOM 元素当普通 div 做 CSS 动画 → 渲染性能断崖式下跌，60fps 都难维持
可以间接联动的三个可行场景
真正能用 CSS 变量的地方，是「控制粒子系统的输入参数」，前提是你的粒子代码主动读取并响应它。例如：
立即学习“前端免费学习笔记（深入）”；
-
动态调节发射速率：在 Phaser 中，用
document.documentElement.style.getPropertyValue('--emit-rate')读取后传给emitter.setEmissionRate() -
切换粒子颜色主题：将
--primary-color转为 RGB 数组，注入startColor和endColor配置 -
缩放整体粒子尺寸：读取
--scale-factor，乘到startSize、endSize上，避免硬编码像素值
注意：必须手动绑定更新逻辑，比如监听 CustomEvent 或轮询 getComputedStyle，CSS 变量本身不会自动触发粒子重算。
Phaser 3 中读取 CSS 变量的最小可行示例
const emitter = this.add.particles(0, 0, 'spark', {
speed: { start: 0, end: 300 },
lifespan: 1200,
scale: { start: 0.8, end: 0 }
});
// 每帧检查变量（或节流后调用）
this.time.addEvent({
delay: 100,
loop: true,
callback() {
const root = document.documentElement;
const rate = parseFloat(root.style.getPropertyValue('--emit-rate')) || 50;
const size = parseFloat(root.style.getPropertyValue('--particle-size')) || 1.2;
emitter.setEmissionRate(rate);
emitter.setParticleScale(size);
}
});
关键点：setEmissionRate() 和 setParticleScale() 是 Phaser 提供的运行时更新接口；若用 flow() 启动后不调用它们，改 CSS 变量就等于没改。
真正容易被忽略的是：粒子轨迹的「动态性」来自每帧对速度/位置的累积计算，CSS 变量只是个静态配置开关。想让轨迹随用户滚动或悬停实时弯曲？得用 update 回调读传感器数据或 DOM 位置，再喂给粒子的 velocity 或自定义力场——这时候 CSS 变量连边都沾不上。
