通过CSS的@keyframes定义动画序列，使用rotate()和scale()实现图标旋转放大；将动画绑定到元素并设置时长、缓动和循环方式即可完成流畅效果。1. 定义关键帧动画@keyframes rotateAndGrow { from { transform: rotate(0deg) scale(1); } to { transform: rotate(360deg) scale(1.5); }}；2. 应用.animation: rotateAndGrow 2s ease-in-out infinite于.icon类；3. 可选:hover触发单次动画。需注意元素为inline-block且transform-origin默认居中。
想让图标旋转并放大，可以通过 CSS 的 @keyframes 配合 transform 中的 rotate() 和 scale() 来实现。整个过程不需要 JavaScript，仅用几行 CSS 就能完成流畅动画。
定义关键帧动画 @keyframes
使用 @keyframes 创建一个动画序列，控制图标的旋转角度和缩放比例。
这个动画从 0 度开始旋转，同时保持原始大小；结束时旋转一圈，并放大到 1.5 倍。
应用动画到图标
将定义好的动画绑定到目标元素（比如一个 icon）上，并设置动画时长、重复方式等。
立即学习“前端免费学习笔记（深入）”；
.icon { display: inline-block; animation: rotateAndGrow 2s ease-in-out infinite; }说明：
-
2s表示动画持续 2 秒 -
ease-in-out让动画开始和结束更平滑 -
infinite实现无限循环播放 -
inline-block确保 transform 生效
HTML 示例结构
假设你使用的是 Font Awesome 图标或其他 inline 元素：
加上上面的 CSS 后，图标就会持续旋转并放大。
可选：鼠标悬停触发动画
如果只想在用户悬停时动画，可以改用 :hover 控制：
这样图标只在鼠标移上时旋转放大一次（forwards 保持最终状态）。
基本上就这些。通过组合 rotate 和 scale，你可以自由设计图标的动效节奏和幅度，灵活又高效。不复杂但容易忽略细节是 transform 必须作用于可渲染元素，且最好设置 transform-origin 控制旋转中心点（默认是中心）。
