按钮悬停缩放不平滑需确保transition写在默认样式中且只过渡transform，启用will-change或translatez(0)触发gpu加速，移动端需处理:hover与:active冲突并用transform替代width/height避免重排。
按钮悬停时缩放不平滑？检查 CSS transition 是否生效
缩放卡顿或直接跳变，大概率是没加 transition 或写在了错误位置。缩放必须搭配过渡动画才自然，且要作用在 :hover 触发前的默认状态上。
-
transform: scale(1)必须写在按钮的默认样式里（不是只写在:hover中） -
transition: transform 0.2s ease同样写在默认样式中，不能只写在:hover - 避免同时过渡多个属性（如
transition: all 0.2s），会拖慢渲染，只过渡transform - 若用 Flex/Grid 布局，确保父容器没有
overflow: hidden，否则缩放可能被裁剪
缩放后文字模糊或边缘锯齿？启用 GPU 加速
纯 CSS 缩放在某些浏览器（尤其是旧版 Chrome/Safari）下容易发虚，本质是没触发硬件加速。加一条 will-change: transform 或强制 3D 变换可解决。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 在按钮默认样式中加
will-change: transform（轻量，推荐） - 或改用
transform: scale(1.05) translateZ(0)，translateZ(0)强制创建合成层 - 慎用
backface-visibility: hidden，它虽能辅助渲染，但对简单缩放非必需 - 注意：
will-change不要滥用，仅对频繁交互元素使用
移动端点击无反馈？缩放和 active 状态冲突
手机端点按按钮时，:hover 会延迟触发甚至不触发，导致缩放“卡住”或完全无效；同时 :active 若未重置，可能残留放大态。
- 给按钮加
touch-action: manipulation，提升触摸响应速度 - 显式定义
:active样式，例如transform: scale(0.98)，再配合transition回弹 - 不要依赖
:hover做唯一交互反馈，移动端建议叠加tap-highlight-color: transparent和 JS 的click类名切换 - 测试时真机优先——模拟器常无法复现触摸延迟问题
多个按钮缩放时互相挤占布局？用 transform 而非 width/height
如果用 width、height 配合 transition 实现“变大”，会触发重排（reflow），影响性能且导致邻近元素位移。真正安全的缩放只该用 transform。
- 绝对禁止写
width: 120%; transition: width 0.2s这类代码 -
transform: scale()是合成属性，只触发重绘（repaint），不破坏文档流 - 若需保持点击热区不变，注意
scale()也放大了整个盒模型（含 padding/border），必要时用transform-origin: center控制缩放基点 - 缩放值建议控制在
scale(0.95)到scale(1.15)之间，过大易造成视觉突兀
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
