写了 scale() 却没动画效果是因为缺少 transition 声明，必须在基础状态（非 :hover）中定义 transition: transform 才能实现平滑缩放。
直接加 transform: scale(1.05) 不会动，因为缺 transition；带图标的卡片还要额外处理图标对齐、文字清晰度和响应式断点下的缩放冲突。
为什么写了 scale() 却没动画效果
浏览器默认不给任何 CSS 属性加过渡，transform 也不例外。只写 .card:hover { transform: scale(1.05); } 会导致“啪”一下跳变，不是平滑放大。
-
transition必须写在非:hover的基础规则里，比如.card { transition: transform 0.2s ease-out; } - 别用
transition: all 0.2s——它会让边框、阴影、文字都参与过渡，性能差，还可能引发边缘发虚 - 如果用了
!important覆盖了 Bootstrap 默认样式，但没覆盖到你自定义的transition，也会失效
.card 里有图标时，缩放后图标错位或模糊怎么办
Bootstrap 卡片常搭配 .card-icon（自定义类）、<i class="bi bi-star"></i> 或 .card-img-top，缩放会连带拉伸图标，导致 SVG 失真、字体图标偏移、或 object-fit 行为异常。
- 给图标容器（如
.card-icon）加will-change: transform;，提前提示浏览器升层，减少首次缩放卡顿 - 避免对图标本身设
font-size或width/height后再缩放——改用transform: scale(1.2)单独控制，和卡片缩放解耦 - 若用
.card-img-top，补上height: auto; max-width: 100%;，防止缩放后图片拉伸变形 - SVG 图标建议内联或用
background-image+background-size: contain，避开transform对矢量渲染的影响
响应式断点下缩放比例怎么调才不挤占相邻列
Bootstrap 的栅格（.row > .col）是流式布局，scale() 不改变文档流尺寸，但视觉变大后容易压到隔壁卡片，尤其在小屏（xs/sm）下间距本就紧凑。
- 在移动端主动降级：用媒体查询限制缩放仅在
md及以上生效：@media (min-width: 768px) { .card { transition: transform 0.2s ease-out; } .card:hover { transform: scale(1.08); } } - 别在
.row-cols-*容器里盲目放大——先加h-100统一卡片高度，再配z-index: 10确保悬停时层级高于邻居 - 如果卡片内含
.btn或.badge，检查它们的z-index是否低于卡片，否则悬停后按钮会被遮住 - 缩放值推荐：桌面端
scale(1.08)，平板端scale(1.05)，手机端禁用或改用box-shadow加深 +opacity: 0.98微调
移动端点按没反馈？别只信 :hover
iOS Safari 和多数安卓浏览器对 :hover 支持极弱，纯靠悬停在触摸设备上基本无效。不能只依赖它，尤其当卡片含图标且承载操作意图时。
- 至少补一层
.card:active { transform: scale(1.05); }，点按瞬间有响应 - 更稳妥：用 JS 在
touchstart时加is-hovered类，touchend清除，CSS 写.card.is-hovered { transform: scale(1.05); } - 别信
@media (hover: hover)——iOS Safari 真机常返回false，不可靠 - 慎用整张卡片模拟悬停感：点按区域过大，意图模糊，反而降低可点击性；图标区域小，更适合加
:active或 JS 响应
真正难的不是写出那三行 CSS，而是判断这张带图标的卡片在 sm 断点下放大后，图标会不会被父容器的 overflow: hidden 裁掉，或者 scale(1.08) 是否让 .card-title 的行高计算失准——这些必须在真机 + 不同视口下实测，光看代码看不出。
