通过CSS的@keyframes定义旋转和缩放动画，使用animation属性应用到图标元素，可实现持续或hover触发的动效。例如：@keyframes spinAndScale { from { transform: rotate(0deg) scale(1); } to { transform: rotate(360deg) scale(1.5); } }，并设置.icon { animation: spinAndScale 2s ease-in-out infinite; }实现无限循环动画，结合:hover可控制动画触发时机，适用于字体或SVG图标。
要实现图标旋转与缩放效果，可以通过 CSS 的 @keyframes 和 animation 属性来控制。这种方式适用于字体图标、SVG 图标或任何带有图标的元素。
1. 定义关键帧动画
使用 @keyframes 创建旋转和缩放的动画过程。
@keyframes spinAndScale {
from {
transform: rotate(0deg) scale(1);
}
to {
transform: rotate(360deg) scale(1.5);
}
}这个动画从无旋转、原始大小开始，到完整旋转一圈并放大 1.5 倍结束。
2. 应用动画到图标
将定义好的动画绑定到目标图标元素上，设置持续时间、循环方式等参数。
立即学习“前端免费学习笔记（深入）”；
// 给图标应用动画.icon {
display: inline-block;
animation: spinAndScale 2s ease-in-out infinite;
}说明：
- 2s：动画持续 2 秒
- ease-in-out：速度曲线，先慢后快再慢
- infinite：无限循环播放
3. 可选：hover 触发动画
如果只想在鼠标悬停时触发动画，可以结合 :hover 使用。
.icon:hover {
animation: spinAndScale 1s ease-out forwards;
}这时动画只在 hover 时运行一次，forwards 表示动画结束后保持最终状态。
4. 实际使用示例（HTML + CSS）
以一个简单的 div 图标为例：
?.icon { font-size: 24px; cursor: pointer; animation: spinAndScale 2s linear infinite; }
@keyframes spinAndScale { 0% { transform: rotate(0deg) scale(1); } 100% { transform: rotate(360deg) scale(1.5); } }
你也可以把 transform-origin 设为中心点确保旋转围绕中心进行（默认已是 center，一般无需修改）。
基本上就这些。通过组合 rotate() 和 scale()，配合灵活的 timing function 与循环设置，就能做出流畅的图标动效。
