用 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) 效果不同——后者是先转再缩，旋转中心点也会跟着缩放变化。

Android Remote Control

远程控制 Android 设备，支持截图、自动化操作手机 App 等功能。本应用使用 uiautomator2 作为底层框架，通过 ADB 连接设备，用户无需 Root（1）查看手机屏幕；（2）自动化操作手机 App；（3）远程安装/卸载应用……

下载

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); }
• 在 <head> 加 <meta name="viewport" content="width=device-width, initial-scale=1"> 消除双击缩放，间接减少延迟
• 如需彻底禁用延迟，加 touch-action: manipulation; 到按钮，但会禁用 pinch-zoom

缩放动画看着简单，真正难的是在不同设备、不同缩放比例、不同字体渲染策略下保持一致。别只测桌面 Chrome，真机连点十次，看有没有闪、糊、跳——那才是最终标准。