通过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 与循环设置,就能做出流畅的图标动效。










