hover 时 transform: scale 动画生效的关键是需预先设置 transform: scale(1)，再在 :hover 中修改值并配合 transition: transform 0.3s ease；父容器应设 overflow: visible、合理配置 transform-origin；触屏设备需用 JavaScript 模拟 hover；卡顿需加 will-change: transform 并避免触发重排。
hover 时用 transform: scale 放大元素，transition 控制动画过程
直接生效的关键是：必须给元素设置 transform: scale(1)（或任何初始值），再在 :hover 中改写为 scale(1.2)，同时配合 transition 声明变化属性和时长。只写 transition: all 0.3s 容易踩坑——all 会把后续可能添加的其他 CSS 变更也纳入动画，干扰预期行为。
推荐写法：transition: transform 0.3s ease，明确锁定仅对 transform 做过渡，性能更好，也避免意外联动。
scale 放大后内容溢出容器怎么办
常见现象：按钮或卡片 hover 后边缘被父容器裁切、文字跑出边界、阴影被截断。本质是父容器没有预留缩放空间，且默认 overflow: hidden 或未设 transform-origin。
- 给父容器加
overflow: visible（注意：若父容器本身有滚动或定位约束，需同步检查） - 用
transform-origin调整缩放中心点，比如transform-origin: center（默认值）适合居中放大；transform-origin: top left适合左上角锚定缩放 - 若父容器高度固定，考虑改用
min-height或让其随内容自然撑开
移动端 touch 设备上 hover 不触发？
绝大多数 iOS 和 Android 浏览器在纯触屏环境下不支持 :hover 伪类（除非模拟鼠标模式）。这不是 bug，而是规范行为。指望 :hover 在手机上“悬停”本身就不可靠。
- 真要兼容触屏，改用
:active模拟点击反馈（但仅限按下瞬间，无法维持） - 更稳妥的做法：用 JavaScript 监听
touchstart/touchend，动态增删 class（如.is-hovered），CSS 中用该 class 替代:hover - 别依赖
hover做关键交互提示，比如重要操作入口无 hover 时不可见——这会让触屏用户直接找不到功能
scale 动画卡顿或闪烁？检查这些硬性条件
即使写了 transform 和 transition，仍卡顿，大概率是浏览器没启用硬件加速，或触发了重排（reflow）。
- 强制开启 GPU 加速：在缩放元素上加
will-change: transform（仅在必要时加，滥用会增加内存开销） - 避免同时修改影响布局的属性，比如
hover里既改scale又改width或margin—— 这会让浏览器放弃优化，退回到软件渲染 - 确保元素没有
box-shadow过于复杂或背景图过大；可加backface-visibility: hidden减少层合成问题
真正难的不是写对那两行 CSS，而是想清楚：这个悬停效果在折叠菜单里要不要生效？在低配安卓机上是否降级为无动画？用户第一次点进来时，有没有非 hover 的视觉提示告诉他们“这里可以交互”？这些细节不处理，再顺滑的 scale 也救不了体验。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
