按钮悬停放大应使用 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），就会触发无关动画，干扰体验。

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

• 精准写法：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 补充可访问性

真实项目里最容易被忽略的是 transform-origin 和首次渲染的 scale(1) 初始化。这两个点不处理，动画看起来就“不够顺”或者“第一下不对劲”，但错误又不报错，很难定位。