CSS 如何实现卡片悬浮上浮效果？

Question

CSS 如何实现卡片悬浮上浮效果？

仓乃文 · Accepted Answer

卡片悬浮上浮是常见的交互效果，通过 transform: translateY() 配合 box-shadow 变化，让卡片在 hover 时产生浮起的视觉感受。

```css
.card {
  background: white;
  border-radius: 10px;
  padding: 20px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
```

补充说明：
- transform: translateY() 触发 GPU 合成层，性能优于修改 top/margin
- 阴影从浅到深配合上浮，增强立体感
- transition 设置 all 0.3s ease 让动画平滑自然
- 可配合 scale(1.02) 实现放大 + 上浮的组合效果