用 transform: scale() 配合 transition 实现平滑缩小需在默认状态写 transition: transform 0.3s ease，hover 状态显式设 transform: scale(0.9)，避免重排、处理模糊、适配移动端并真机验证。
用 transform: scale() 配合 transition 实现平滑缩小
直接给元素加 transform: scale(0.9) 不会动，必须配合 transition 声明过渡属性和时长。关键不是“能不能缩”，而是“缩得是否自然”——transform 必须作用在悬停状态（:hover），且初始状态不能缺省为 scale(1)，否则部分浏览器可能跳变。
-
transition要写在**默认状态**（非 hover）上，比如transition: transform 0.3s ease; -
transform的值必须在:hover中显式设置，如transform: scale(0.85); - 避免同时过渡
width/height，它们会触发重排，而transform只触发重绘，性能更好 - 如果父容器有
overflow: hidden，缩小后边缘可能被裁切，需检查容器尺寸或留白
为什么 scale() 缩小后文字模糊？
这是硬件加速与亚像素渲染的常见副作用。当 scale 值不是整数倍（比如 0.87），浏览器会用插值算法渲染，导致字体边缘发虚。尤其在 Chrome 和 Safari 上明显。
- 优先使用「能被 100 整除」的小数，如
0.8、0.9，避开0.83、0.87这类值 - 可强制开启 GPU 加速：加
transform: translateZ(0);到默认状态，但注意这会新建图层，慎用于大量元素 - 对文字敏感的场景（如按钮文案），改用
font-size缩放 +transition: font-size，虽略慢但更清晰
想让缩小的同时带位移或旋转？
transform 支持函数组合，顺序很重要：CSS 里靠前的变换先执行，所以 scale(0.9) rotate(-2deg) 和 rotate(-2deg) scale(0.9) 效果不同——后者是先转再缩，旋转中心点也会跟着缩放变化。
button {
transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
button:hover {
transform: scale(0.92) translateY(-2px);
}
- 多个
transform函数写在同一行，用空格分隔，不要逗号 - 缓动函数推荐
cubic-bezier(0.25, 0.46, 0.45, 0.94)（类似 iOS 弹性效果），比默认ease更有反馈感 - 慎用
scale()配合transform-origin，若设成top left，缩小会向左上偏移，可能出界
移动端点击没反应？记得处理 :active 和触摸延迟
纯 :hover 在 iOS Safari 和 Android Chrome 上对触摸设备无效（除非模拟 hover），且真机点击常有 300ms 延迟，导致动画卡顿或不触发。
立即学习“前端免费学习笔记（深入）”；
- 加
:active状态确保点击即时反馈：button:active { transform: scale(0.95); } - 在
加消除双击缩放，间接减少延迟 - 如需彻底禁用延迟，加
touch-action: manipulation;到按钮，但会禁用 pinch-zoom
