调整HTML中按钮鼠标悬停缩放比例的建议-html教程-PHP中文网

使用 transform: scale() 实现按钮悬停缩放最稳妥，因其由 gpu 加速、不触发重排、兼容现代浏览器；需搭配 transition: transform 0.2s ease 和 transform-origin: center，避免布局干扰与跳变，ie11 需用 matrix 滤镜降级。

调整html中按钮鼠标悬停缩放比例的建议

按钮悬停缩放用 transform: scale() 最稳妥

直接改 width 或 height 会触发重排（reflow），影响性能；transform: scale() 由 GPU 加速，动画更顺，且不干扰布局流。几乎所有现代浏览器都支持，包括 Safari 12.1+、Chrome 4+、Firefox 16+。

常见错误是只写 scale(1.1) 却没设 transition，导致跳变无动画；或忘了加 will-change: transform（可选，对频繁交互的按钮有轻微优化）。

必须搭配 transition: transform 0.2s ease，否则缩放瞬间完成
推荐用 transform-origin: center 避免偏移（默认就是 center，显式声明更可控）
不要在伪类里写 display: inline-block 等布局属性——缩放前就该确定好元素的盒模型

IE11 兼容需 fallback 到 filter: progid:DXImageTransform

IE11 不支持 transform: scale() 的 transition 动画（能缩放但无缓动），且 transform-origin 行为异常。真要兼容，得用老式滤镜，但仅限 IE。

示例写法：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

.btn:hover {
  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1.1, M12=0, M21=0, M22=1.1, SizingMethod='auto expand')";
  filter: progid:DXImageTransform.Microsoft.Matrix(M11=1.1, M12=0, M21=0, M22=1.1, SizingMethod='auto expand');
}