卡片悬浮升起时阴影变大变深需同步过渡transform和box-shadow属性，使用transform: translateY(-4px)与更深的box-shadow值配合0.3s ease动画，避免all过渡；移动端需补充:active或JS触控支持。
卡片悬浮升起时阴影变大变深的 CSS 实现原理
bootstrap 本身不提供“悬浮升起 + 阴影增强”的动画组合，它只提供基础类如 .card、.shadow-sm 等静态阴影，以及 :hover 的触发能力。真正实现“升起+阴影变化”得靠自定义 css 过渡（transition）和属性叠加。
关键不是加动画，而是控制两个属性同步变化：垂直位移（transform: translateY()）和阴影（box-shadow）。两者必须用同一 transition 声明，否则会出现卡顿或不同步。
-
transform用translateY(-4px)比margin-top更高效（不触发重排） -
box-shadow必须从一个较浅值（如0 2px 8px rgba(0,0,0,0.1)）过渡到更深更扩散的值（如0 12px 24px rgba(0,0,0,0.2)） - 务必显式声明
transition: transform 0.3s ease, box-shadow 0.3s ease，不能只写transition: all（会拖慢其他无关属性）
在 Bootstrap 5 卡片中添加 hover 动画的最小代码片段
直接在 .card 元素上加自定义 class（比如 .card-lift-hover），避免污染全局样式。以下 CSS 可放入 <style></style> 或独立 CSS 文件：
.card-lift-hover {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card-lift-hover:hover {
transform: translateY(-4px);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
}
对应 HTML 示例：
<div class="card card-lift-hover">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">标题</h5>
<p class="card-text">内容</p>
</div>
</div>
- 不用改 Bootstrap 的 JS 或任何依赖，纯 CSS 驱动
- 响应式不受影响——
transform和box-shadow在所有视口下都生效 - 如果卡片内含按钮或链接，建议同时给
.card-body a, .card-body button加position: relative; z-index: 1，防止 hover 时被父级transform导致层叠错乱
移动端触摸设备上的 hover 效果失效问题
iOS Safari 和部分安卓浏览器默认不触发 :hover（除非用户真“悬停”，而触摸屏没有悬停概念），导致动画在手机上点一下才闪一下、或完全不触发。
- 不要依赖纯
:hover做核心交互反馈；可配合:active补充触控反馈：.card-lift-hover:active { transform: translateY(-2px); } - 若需全平台一致表现，改用 JS 监听
touchstart/touchend切换 class（如.is-hovered），再用该 class 控制样式 - 注意：
transform在旧版 Android WebView（-webkit-transform 前缀，但 Bootstrap 5 已放弃对该版本支持，一般无需处理
性能与可访问性容易被忽略的细节
动画看似简单，但几个细节不处理会影响体验：
- 未设置
will-change: transform时，频繁 hover 可能引起低端设备掉帧；可在.card-lift-hover中加will-change: transform;（仅对有动画的元素加，别滥用） - 屏幕阅读器用户不会感知 hover，所以不要把关键信息（如操作提示、状态变更）只放在 hover 动画里
- 高对比度模式下，
box-shadow可能被系统忽略；如有必要，可额外用outline或边框粗细变化作降级反馈 - 动画时间别设太短（500ms）：0.2–0.35s 是人眼感知自然的区间
真正难的不是写出这段动画，而是让抬起、阴影、响应、触控、读屏全部协同工作而不打架。多数项目只做到前两步就上线了，但用户在折叠屏、旧平板、朗读模式下会立刻暴露问题。
