HOVER · 悬停交互
参数调改
PLAYGROUND
按压倾角--press_tilt
218
按压缩放--press_scale
0.881
按下时长--press_ms
50260
回弹时长--return_ms
2001000
回弹曲线--ease
铰链边--origin
实现要点
NOTES- 01
双速过渡是手感核心:按下走 --press_ms 的 ease-out(干脆利落),松手走 --return_ms 的过冲弹性曲线(回弹一次)——两条 transition 在常态与 :active 间切换。
- 02
transform-origin 由 --origin 控制铰链边:默认底边像按下去的琴键,可切顶边/中心;--press_tilt 配合 stage 上的 perspective:900px 产生真实透视。
- 03
内容层各自 translateZ(12-28px) 制造『表面下沉、内容浮起』的深度差;动效只改 transform/box-shadow,不触发布局。
- 04
box-shadow 同步收缩变浅:物体压向桌面时落影变近变小,这条『物理逻辑』让按压感可信。
- 05
role=button + tabindex 保留语义;focus-visible 用描边而不是按压形变,避免键盘用户长期停在变形状态;生产建议补 Enter/空格触发按压态。
- 06
预览自动演示:body 未被 hover 时以 6s 周期自动按压两次(keyframes 复用 --press_tilt/--press_scale);光标进入即让位;reduced-motion 全部停用。
源代码
SOURCE
加载源代码…