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