使用transform: scale()配合transition实现图标悬停平滑放大，需设置display: inline-block、transform-origin: center center，并在:hover时应用scale(1.2)，通过transition控制动画过渡，可选cubic-bezier调整缓动效果。
想让图标在鼠标悬停时平滑放大，可以用 transform: scale() 搭配 transition 实现。核心思路是通过 CSS 控制元素的缩放比例，并添加过渡动画让变化更自然。
1. 基础结构：准备图标元素
通常使用一个 或 标签展示图标，比如用 Font Awesome：
2. 设置默认状态与 transform-origin
默认状态下图标为原始大小（scale(1)），并确保缩放以中心点进行：
.icon {display: inline-block;
transition: transform 0.3s ease;
transform-origin: center center;
}
transform-origin: center center 很关键，避免图标偏移或抖动。
立即学习“前端免费学习笔记（深入）”；
3. 添加 hover 状态实现放大
当鼠标悬停时，将图标放大 1.2 倍：
transform: scale(1.2);
}
transition 属性会让这个缩放过程变得平滑，而不是瞬间跳变。
4. 可选优化：调整缓动效果
可以换不同的缓动函数让动画更有感觉：
- ease-in：缓慢开始
- ease-out：缓慢结束
- cubic-bezier(0.25, 0.8, 0.25, 1)：模拟弹性效果
例如：
transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);基本上就这些。只要设置好初始状态、过渡属性和 hover 缩放，就能轻松实现图标放大动画。不复杂但容易忽略 transform-origin 和 display 类型的影响。
