使用CSS的transform和transition属性可实现图标缩放动画。首先设置.icon{display:inline-block;transition:transform 0.3s ease;}，再定义.icon:hover{transform:scale(1.2);}，即可实现鼠标悬停时平滑放大效果。注意需将元素设为inline-block以确保transform生效，推荐使用transform而非width/height避免布局重排，可通过transform-origin控制缩放中心点，配合will-change:transform提升动画性能，父容器可预留空间防止布局抖动。
要实现图标放大缩小的动画效果，可以使用 CSS 中的 transform 配合 scale 和 transition 属性。这种组合能让图标在鼠标悬停或状态变化时平滑地缩放，提升交互体验。
基本原理：transform scale 控制大小
transform: scale() 用于改变元素的尺寸。例如：
- scale(1) 表示原始大小
- scale(1.2) 表示放大到 120%
- scale(0.8) 表示缩小到 80%
配合 transition，可以让这个缩放过程变得平滑，而不是瞬间切换。
添加 transition 实现动画过渡
给图标设置 transition 属性，指定哪些变化需要动画以及持续时间。常用写法：
立即学习“前端免费学习笔记（深入）”；
transition: transform 0.3s ease;
这表示所有 transform 的变化将在 0.3 秒内以缓动效果完成。
完整示例：鼠标悬停放大图标
以下是一个常见的用法，鼠标移到图标上时放大 1.2 倍：
.icon {display: inline-block;
font-size: 24px;
transition: transform 0.3s ease;
}
.icon:hover {
transform: scale(1.2);
}
注意：display: inline-block 或 block 是必要的，因为 transform 对纯 inline 元素支持有限。
进阶技巧：回弹效果与防止布局抖动
- 使用 transform-origin 控制缩放的中心点（默认是中心）
- 加入 will-change: transform 提升动画性能
- 避免使用会触发重排的属性（如 width/height），优先用 transform
- 若图标在缩放时影响布局，可考虑父容器预留空间或使用 transform 缩小而非放大
基本上就这些。利用 transform scale 和 transition 组合，能轻松实现流畅的图标缩放动画，不复杂但容易忽略细节。
