核心是用transform: translatey(-4px)上移并同步增大box-shadow模糊半径与透明度，二者需统一transition且仅作用于这两个属性，避免多维变换或冗余阴影导致失真。
卡片悬停时上移并加深阴影，核心就两件事：用 transform: translateY(-4px) 往上推，同时增大 box-shadow 的模糊半径和深色偏移——但直接写死值容易在不同背景或层级下显得突兀，得按场景调参。
为什么只改 transform 和 box-shadow 就够了
悬停动效不需要 JS，纯 CSS 更轻量、更易维护。关键在于两个属性都支持 CSS 过渡（transition），且浏览器对它们的硬件加速友好。注意别加 transform: scale() 或 opacity，除非设计明确要求；多一个变换维度会增加渲染开销，也容易让卡片“飘”得不自然。
常见错误现象：transform 值写成正数（比如 translateY(4px)）导致卡片往下掉；box-shadow 用了太多层阴影（如 3–4 个逗号分隔值），反而让边缘发虚、层次变平。
- 推荐只用一层阴影，例如：
box-shadow: 0 8px 16px rgba(0,0,0,0.12) - 悬停后改为：
box-shadow: 0 12px 24px rgba(0,0,0,0.2)（模糊值+8，透明度+0.08） - 过渡统一写在基础状态里：
transition: transform 0.2s ease, box-shadow 0.2s ease
transform 上移多少像素才不“跳”
数值太小（如 -2px）看不出变化，太大（如 -10px）会让卡片脱离视觉锚点，尤其在网格布局中造成间隙错乱。实际项目中 -4px 是较稳妥的起点，但需结合卡片自身高度和周围行高判断。
使用场景差异：
- 卡片高度 ≤ 200px → 用
translateY(-4px) - 卡片含头像/大图/标题区 → 改为
translateY(-6px)，强化“浮起”感 - 深色背景（如
#1e1e1e）上 → 阴影透明度要再降 0.04～0.06，否则显脏 - 卡片有
border-radius: 8px以上 → 阴影模糊值建议 ≥ 20px，避免圆角被切掉
兼容性与性能坑点
旧版 Safari（iOS 12 / macOS Mojave）对 transform + box-shadow 同时过渡偶有闪烁，不是 bug，是渲染管线未优化到位。不用加 will-change: transform——它可能引发额外重绘，反而更卡。
真正有效的做法：
- 确保父容器没设
overflow: hidden，否则上移后阴影被裁剪 - 避免在
:hover里改height或margin，会触发 layout，打断动画帧 - 如果卡片用 Flex/Grid 布局，确认没设
align-items: stretch导致悬停时高度微变 - 测试真机滑动时的响应：部分 Android WebView 对
ease缓动支持弱，可改用cubic-bezier(0.25, 0.46, 0.45, 0.94)
最常被忽略的是阴影颜色——别硬写 rgba(0,0,0,0.2)。如果卡片底色偏蓝灰（如 #f8f9fa），阴影用带一点蓝调的 rgba(33, 37, 41, 0.12) 会更融合；深色主题下，甚至该用浅灰而非纯黑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
