MOTION HUB

拖尾星屑

Cursor Trail
#cursor-trail · 10/72
MOVE · 移动交互

参数调改

PLAYGROUND
星屑颜色--trail_color
星屑尺寸--particle_px
418
px
存活时长--life_ms
3001500
ms
撒布间距--spawn_px
644
px
漂移幅度--drift_px
060
px
粒子形状--shape

实现要点

NOTES
  1. 01

    粒子用 Web Animations API 驱动 transform + opacity,全程合成器路径;onfinish 即移除节点,不留 DOM 尾巴。

  2. 02

    生成节流按『移动距离 ≥ --spawn_px』而不是按帧:快速甩动自动加密、慢移稀疏,粒子量与速度天然正相关。

  3. 03

    并发上限 MAX_ALIVE=72 兜底:超限直接跳过生成,防止长时间原地盘旋把节点数推高。

  4. 04

    尺寸随机 0.55-1.4 倍缩放 + 随机漂移向量(略微向上偏),星屑才有『散落』感而不是『复制』感;形状切 star 时用 clip-path 八点星形。

  5. 05

    reduced-motion:不监听、不生成、不自动演示;触屏拖动同样出粒子(pointer 事件天然支持)。

源代码

SOURCE

加载源代码…