反馈与交互 · 点一下的回应
悬停预览跟随Cursor preview follow
- 一眼看到是什么
- 跟着手走
- 换得快
指针划过菜单里的名字,一张预览图就从指针那儿冒出来跟着走;移到下一个名字,预览图原地换成那一个,指针一动它又跟上去。离开列表它就缩回去。
什么时候用它
作品集列表、商品列表、目录这类「名字看不出是什么」的地方用它;名字本身已经说明白了的列表别用 —— 多一层浮动物只会碍事,还会挡住下一行。
参数
preview 196×132 · transform: scale 0 → 1 in 320ms cubic-bezier(.22,1,.36,1) · position lerp 0.12, no easing · swaps content per row
配方
悬停预览跟随 → scale 0 → 1 @ 320ms cubic-bezier(.22,1,.36,1)
给 AI 的一句话
给这个列表加悬停预览:指针进入某一行时,把该行的图塞进一个 position: fixed 的容器并从 scale 0 长到 1(320ms cubic-bezier(.22,1,.36,1)),位置用 lerp 0.12 追指针;换行时容器不动、只换里面的图;离开列表缩回 0。容器要 pointer-events: none。