悬停抬升

什么时候用

• 可点击的卡片、商品卡、文章列表项，需要让指针的位置得到回应
• 一排并列的卡片里，想突出当前指到的那一张
• 按钮或图标已经够清楚，只差一点「它活着」的暗示

适用场景：卡片 / 列表 / 按钮

推荐取值

抬升距离

2–6px

过渡时长

150–250ms

缓动

ease-out / cubic-bezier(0.22, 1, 0.36, 1)

阴影

0 8px 24px rgba(0, 0, 0, 0.14)

缩放

1.01–1.03（可选）

别搞混

• 和「按压反馈（press feedback）」的区别

  悬停抬升是指针停留在上面期间持续存在的状态，用 :hover；按压反馈是按下和松开那一瞬的反馈，用 :active。两者经常叠着用，但触发时机完全不同。

• 和「滚动视差（parallax）」的区别

  悬停抬升只由指针驱动，鼠标进出才动；视差由滚动驱动，鼠标不动、只滚页面它也会移动。

容易踩的坑

• 只加位移不加阴影，元素会像一张贴纸飘起来，没有重量感；位移和阴影要一起变
• 触摸设备没有 hover，点完 :hover 可能粘住不消失，所以静止态本身必须完整可读
• 位移超过 8px 会显得轻浮、像在跳，2–6px 通常刚好
• 用 top 或 margin 做位移会触发重排，要用 transform: translateY()；也不要改 width/height

无障碍降级

prefers-reduced-motion: reduce 下去掉位移和缩放，只保留阴影加深或底色变化来表示悬停，过渡时长可以直接设为 0ms。

关键词

• transform: translateY
• box-shadow
• transition
• :hover
• elevation
• will-change: transform

参考

• MDN · :hover
• MDN · box-shadow
• MDN · transition

相关展品

• F-02按压反馈Press Feedback
• F-03磁吸按钮Magnetic Button
• V-05光晕聚光Spotlight Glow