使用 transform: scale() 配合 transition 可实现高性能的元素缩放动画，如 .box:hover { transform: scale(1.2); } 实现悬停放大，transition 控制动画时长与缓动，transform-origin 调整缩放基点避免位移，结合 :active 或 JS 类控制可扩展交互，确保动画流畅无布局抖动。
当需要让一个元素在鼠标悬停或其他状态变化时平滑地缩放大小，CSS 的 transform: scale() 配合 transition 是最常用且性能友好的做法。它不会触发重排（reflow），只涉及合成层的变换，因此动画流畅、资源消耗低。
使用 transform scale 实现缩放效果
通过 transform: scale() 可以放大或缩小元素的视觉尺寸。值为 1 表示原始大小，大于 1 放大，小于 1 缩小。
例如，让一个盒子在悬停时放大 1.2 倍：
.box {
width: 100px;
height: 100px;
background: #3498db;
transition: transform 0.3s ease;
}
.box:hover {
transform: scale(1.2);
}
这样，鼠标移上时元素会平滑放大，移出后恢复原状。
立即学习“前端免费学习笔记（深入）”；
transition 控制动画细节
transition 属性用于定义变换的动画效果。它可以设置四个子属性：
- property：指定要过渡的 CSS 属性，如 transform
- duration：动画持续时间，如 0.3s
- timing-function：缓动函数，如 ease、linear、cubic-bezier()
- delay：延迟多久开始动画
上面例子中 transition: transform 0.3s ease; 表示只对 transform 变化应用 0.3 秒的缓入缓出动画。
如果想同时过渡多个属性，可以用逗号分隔：
transition: transform 0.3s ease, opacity 0.2s linear;
避免布局抖动：设置 transform-origin
默认情况下，缩放以元素中心点（50% 50%）为基准。如果希望从某个角落或边缘开始缩放，可以使用 transform-origin 调整原点。
比如让元素从左上角缩放：
.box {
transform-origin: top left;
}
这在制作菜单图标或按钮动效时特别有用，能更精准控制视觉流向。
结合其他状态实现更丰富交互
除了 hover，还可以结合 :focus、:active 或 JavaScript 控制类名来触发放大效果。
例如点击时短暂放大：
.box:active {
transform: scale(0.95);
}
或者用 JS 动态添加类：
// JavaScript
element.classList.add('zoom-in');
CSS 中预先定义好动画：
.zoom-in {
transform: scale(1.5);
transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
基本上就这些。合理使用 scale 和 transition，能让界面交互更自然生动，又不牺牲性能。关键是设置好过渡属性和原点，避免意外的位移或抖动。
