按钮悬停放大应使用 transform: scale() 配合 transition 实现，避免 width/height 改变布局；需设初始 transform: scale(1) 防闪烁，指定 transform-origin 和精确 transition 属性，并注意移动端 :hover 兼容性。
按钮悬停放大用 transform: scale() 最直接
不用 JS，纯 CSS 就能实现平滑放大效果。transform 性能好，不触发重排，浏览器会走 GPU 加速。关键不是“改宽高”，而是用 scale() 做视觉缩放——它基于自身原点缩放，不会影响布局流。
常见错误是写成 width: 120%; height: 120%：这会撑开父容器、可能引发换行或溢出，且动画卡顿明显。
- 推荐写法：
transform: scale(1.1)（放大 10%） - 必须配合
transition才有过渡效果，否则是瞬时跳变 - 缩放原点默认是元素中心（
transform-origin: center），如需从左上角放大，加transform-origin: top left
transition 要指定 transform 属性，别写 all
写 transition: all 0.3s ease 看似省事，但实际会监听所有可动画属性（比如 color、background），一旦其他样式意外变化（例如 JS 改了 opacity），就会触发无关动画，干扰体验。
- 精准写法：
transition: transform 0.3s ease - 时间值建议 0.2s–0.4s：太短显得突兀，太长响应迟钝
- 缓动函数选
ease或cubic-bezier(0.25, 0.46, 0.45, 0.94)（更自然的“先慢后快再慢”）
必须设初始 transform 否则首次悬停可能闪一下
部分浏览器（尤其是 Safari 和旧版 Chrome）在元素首次 hover 时，若没声明初始 transform，会把 scale(1) 当作“无变换”，导致第一次动画从隐式 1→1.1 出现微小闪烁或错位。
立即学习“前端免费学习笔记（深入）”；
- 解决方法：给按钮加默认
transform: scale(1)（哪怕值是 1） - 完整示例：
button { transform: scale(1); transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94); } button:hover { transform: scale(1.15); } - 如果按钮有边框或阴影，放大后可能裁剪，记得检查
overflow: visible和父容器padding
移动端要额外处理 :hover 失效问题
iOS Safari 和多数安卓浏览器在触摸设备上不触发 :hover（除非用户点过一次），单纯靠 CSS 无法稳定响应“悬停”。这不是 bug，是规范行为。
- 简单方案：加
@media (hover: hover)媒体查询做条件启用 - 更稳妥做法：用
:active+ JS 添加临时 class 模拟悬停态（尤其对纯触屏场景） - 注意：不要依赖
:hover做核心交互反馈，比如按钮是否可点击——得靠:focus或aria-pressed补充可访问性
