实现图标旋转与缩放动画需使用css的transform和animation属性。1. 创建图标元素，如div模拟图标；2. 用@keyframes定义spinAndScale动画，控制rotate和scale变化：0%为rotate(0deg) scale(1)，50%为rotate(180deg) scale(1.5)，100%为rotate(360deg) scale(1)；3. 将animation应用到.icon类，设置animation: spinAndScale 2s infinite ease-in-out，配合宽高、背景等样式；4. 可选:hover交互，用transition实现悬停时的transform变化。根据需求选择持续动画或交互触发，确保元素有固定尺寸以提升动画稳定性。
要实现图标的旋转与缩放动画，核心是使用 CSS 的 transform 和 animation 属性。通过定义关键帧和过渡效果，可以让图标平滑地旋转和放大缩小。
1. 基础结构：准备图标元素
通常使用字体图标（如 Font Awesome）或 svg 图标。这里以一个简单的 div 模拟图标为例：
<div class=”icon”></div>
2. 定义旋转与缩放动画
使用 @keyframes 创建动画规则，控制 transform 的 rotate 和 scale 值：
@keyframes spinAndScale {
0% {
transform: rotate(0deg) scale(1);
}
50% {
transform: rotate(180deg) scale(1.5);
}
100% {
transform: rotate(360deg) scale(1);
}
}
3. 应用动画到图标
将动画绑定到图标元素，设置持续时间、循环方式等：
立即学习“前端免费学习笔记（深入）”；
.icon {
width: 40px;
height: 40px;
background: #007bff;
border-radius: 50%;
animation: spinAndScale 2s infinite ease-in-out;
}
说明：
– 2s 表示动画周期为2秒
– infinite 让动画无限循环
– ease-in-out 使动画开始和结束更柔和
4. 可选：悬停触发动画
如果只想在鼠标悬停时动画，可以配合 :hover 使用 transition：
.icon {
transition: transform 0.6s ease;
}
.icon:hover {
transform: rotate(180deg) scale(1.2);
}
这种方式更适合交互式响应，不需要持续动画。
基本上就这些。用 keyframes 实现连续动画，用 hover + transition 实现交互反馈，根据场景选择合适方式。注意加上浏览器前缀（如有需要）并确保图标容器有明确尺寸，动画效果会更稳定。