光标与指针 · 指针碰到什么
光标拖尾Cursor trail
- 跟手
- 有余韵
- 密度可控
指针走过的地方,身后落下一串慢慢缩小、淡出的东西(这里是商品图)。关键是「落」不是「画」:每 58ms 才生一枚,所以是一串珠子,不是一条线。
什么时候用它
适合本身就是「逛」的页面:商品列表、作品集、活动落地页。它是装饰,所以别放在表单、设置、结账这些要专心的地方 —— 指针每动一下都留一串东西,会让人分心。触屏上没有指针,所以这条在手机上等于不存在,别把它当主要卖点。
参数
spawn every 58ms · life 800ms · transform: scale 1→0.34 · opacity: (1−k²)×1.15 · 14-item pool · per frame, no easing
配方
生成间隔 every 58ms光标拖尾 → scale 1 → 0.34 @ 58ms逐帧积分,不过缓动
给 AI 的一句话
给指针加一条拖尾:每 58ms 在指针当前位置落一枚 46px 的方图(轮换几张商品照),然后让它在 800ms 里缩到 0.34 倍、淡出到 0,同时按出生顺序左右交替旋转最多 16°。用 14 个元素的对象池循环复用,不要每次 new 一个 DOM 节点。指针旁边再跟一个小圆点,位置直接跟到手,不要加缓动——拖尾可以有延迟,指针本身不能。间隔是这条动效的手感所在,别调到 16ms 以下,那样会糊成一坨。