在Bootstrap 5中如何利用CSS实现具有交互感的卡片悬浮提升效果？

应使用 transform: translateY() + transition 实现卡片悬停上移，因 margin-top 或 top 会触发重排导致卡顿、错位及父容器撑开；transform 走合成层、GPU 加速且不干扰布局，需配合 box-shadow 和 z-index 变化，并注意移动端焦点替代及父容器 overflow 问题。

直接用 transform: translateY() + transition 是唯一高效路径，改 margin-top 或 top 会触发重排、卡顿、错位。

为什么不能用 margin-top 实现上移

改 margin-top 会让浏览器重新计算整个文档流位置，动画掉帧明显，尤其在低端安卓机或密集卡片网格中。更糟的是，它可能撑开父容器高度，导致相邻行卡片跳动。而 transform: translateY(-8px) 只走合成层，GPU 加速，不干扰布局。

• 别写 .card:hover { margin-top: -8px; } —— 这是性能陷阱
• 必须加 transition: transform 0.2s ease-out; 到常态 .card 规则里，不是只写在 :hover 中
• 负值才上移：translateY(-6px) 合理，translateY(6px) 是下移

阴影和层级必须同步变化

只动卡片不带动阴影，视觉上就像“飘起来但影子还钉在地上”。Bootstrap 的 .card 默认有 box-shadow，但悬停时若没显式覆盖，阴影不会加深或位移。

• 在 .card:hover 里同时写 transform: translateY(-6px) 和 box-shadow: 0 6px 12px rgba(0,0,0,.15)
• 加 z-index: 10（别用 auto），否则悬停卡片可能被右边或下边的兄弟元素遮住
• 避免混用 shadow-sm 和自定义 box-shadow —— 后者会被前者工具类的 !important 覆盖

移动端点按失效不是 bug，是必须绕过的事实

iOS Safari 和 Android Chrome 在真机上不把单次点击当 hover，这是规范行为。纯 CSS :hover 在触屏设备上基本不可靠。

立即学习“前端免费学习笔记（深入）”；

• 别依赖 @media (hover: hover) 做判断 —— iOS 真机常返回 false，白写
• 底线方案：给卡片加 tabindex="0"，再写 .card:focus { transform: translateY(-6px); }，兼顾键盘与触摸
• 如需强反馈，用 JS 切换 is-lifted 类，但注意避免在快速连点时状态残留

真正容易翻车的地方不在代码，在布局容器

写了三行 CSS 却发现卡片悬停后边缘被裁、阴影消失、上移后文字模糊——大概率是父容器惹的祸。

• 检查是否套在 .card-group 或设置了 overflow: hidden 的 .row / 自定义 wrapper 里；box-shadow 和 transform 都会被硬裁
• 如果用了 h-100，确认父级 .row 没加 align-items-start —— 否则悬停上移后卡片底部会露白边
• will-change: transform 推荐加在常态 .card 上，但别滥用；加太多反而触发不必要的图层合成，得不偿失