MOVE · 移动交互
参数调改
PLAYGROUND
星屑颜色--trail_color
星屑尺寸--particle_px
418
存活时长--life_ms
3001500
撒布间距--spawn_px
644
漂移幅度--drift_px
060
粒子形状--shape
实现要点
NOTES- 01
粒子用 Web Animations API 驱动 transform + opacity,全程合成器路径;onfinish 即移除节点,不留 DOM 尾巴。
- 02
生成节流按『移动距离 ≥ --spawn_px』而不是按帧:快速甩动自动加密、慢移稀疏,粒子量与速度天然正相关。
- 03
并发上限 MAX_ALIVE=72 兜底:超限直接跳过生成,防止长时间原地盘旋把节点数推高。
- 04
尺寸随机 0.55-1.4 倍缩放 + 随机漂移向量(略微向上偏),星屑才有『散落』感而不是『复制』感;形状切 star 时用 clip-path 八点星形。
- 05
reduced-motion:不监听、不生成、不自动演示;触屏拖动同样出粒子(pointer 事件天然支持)。
源代码
SOURCE
加载源代码…