动画 · 悬停与焦点 · 02
悬停上浮
悬停上浮 = 卡片在悬停时抬升几像素并加深阴影，提示它可点击、可交互。
直达修改 Prompt →
尊重 prefers-reduced-motion：动画关闭，仅保留终态。
悬停上浮是什么？
悬停上浮告诉用户这块面板是活的。卡片抬升几像素、阴影变深，光标像把元素轻轻拎起。控制在 8-12px、一步阴影，再多页面就显廉价发飘。
动画 标本
- 触发
- hover
- 技术
- css
- 时长
- 2.4s
- 缓动
ease-in-out- 性能
- transform, box-shadow
什么时候用
- Clickable cards in a grid (pricing, features, posts)
- Any surface that navigates on click
什么时候别用
- Non-interactive cards — a lift with no destination confuses
- Dense lists where every row lifting creates noise
Pair the lift with a visible pointer cursor so the motion reads as clickable, not decorative.
Add a hover lift to a card: translateY(-10px) with a deeper shadow on hover, 200ms ease-out, transform and box-shadow only.