用 transform: translateY() 实现卡片上移最高效，需配合 transition、box-shadow 同步变化、will-change 提升性能，并兼顾移动端 touch 事件及文字模糊修复。
用 transform: translateY() 实现卡片上移，别用 margin-top
直接改 margin-top 会导致布局重排（reflow），触发浏览器重新计算所有元素位置，动画卡顿且影响性能。真正轻量、平滑的做法是用 transform，它只触发合成（compositor），gpu 加速，尤其适合悬停动画。
- 必须给卡片加
transition，否则没动画：比如transition: transform 0.2s ease; -
transform: translateY(-8px)是上移 8px；正数是下移，负数才是上移 - 别忘了加
will-change: transform（可选但推荐），提前提示浏览器该元素将变化，提升响应速度
Bootstrap 5 中怎么写才不和默认样式冲突
Bootstrap 5 的 .card 默认有 box-shadow 和 border-radius，如果只加 transform，阴影不会跟着动——看起来像“卡片飘起来了但影子还蹲在地上”。得让阴影也一起动。
- 把
box-shadow放在悬停状态里，和transform同步变化，比如加一点深度：box-shadow: 0 6px 12px rgba(0,0,0,.1); - 避免用
!important覆盖 Bootstrap 的.card:hover，优先用更具体的选择器，比如.card.card-lift:hover - 如果用了
.card-body内部有链接或按钮，记得检查它们的z-index，否则悬停时可能被其他层遮挡
移动端悬停失效？这不是 bug，是设计逻辑
手机和平板没有“鼠标悬停”这个概念，:hover 在触摸设备上基本不可靠——点一下就触发，再点一下才离开，体验错乱。不能只依赖 :hover。
- 真要兼容触摸设备，得用 JavaScript 监听
touchstart/touchend，动态加 class，比如.is-hovered - 或者干脆放弃“悬停即上移”，改用点击展开/高亮等更适合触控的操作模式
- 测试时别只在 Chrome 模拟器里点，真机连上 DevTools 调试，很多悬停效果在 iOS Safari 上压根不触发
为什么加了 transform 后文字变模糊了
这是 Chrome 和 Safari 常见现象，本质是 subpixel 渲染失准——transform 把元素挪到了非整像素位置，字体边缘抗锯齿出问题。
- 加
backface-visibility: hidden或perspective: 1000能强制启用 GPU 层，多数情况修复模糊 - 避免用小数位移，比如
translateY(-2.5px)，改用整数-2px或-3px - 如果卡片里有
font-smoothing: antialiased，它和transform组合容易加剧模糊，可临时去掉试试
