MotionLang

反馈与交互 · 点一下的回应

悬停预览跟随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

配方

  1. 悬停预览跟随 → 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。

同类的其他动效