@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }，配合 animation: spin 1s linear infinite 使用，用 border+border-radius 绘制圆环并旋转，兼容现代浏览器。
用 @keyframes 定义无限旋转动画
CSS 里没有“加载图标”这个内置概念，得靠自己画一个形状（比如 border 构成的圆），再让它转起来。核心是用 @keyframes 描述从 0° 到 360° 的变化，然后绑定到元素上。
常见错误是只写 transform: rotate(360deg) 却没配 @keyframes——这行代码本身不会动，只是个静态状态。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 动画名起简单点，比如
spin，别用loading-rotate-animation-forever这种 - 关键帧里只写
from和to就够了，不用塞中间帧 -
to必须写成transform: rotate(360deg)，不能写rotate(0deg)，否则可能不触发重绘
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
给元素加 animation 并确保持续运行
有了动画定义，还得让元素真正跑起来。重点不是“怎么加”，而是“加对参数”：漏掉 infinite 就只转一圈；忘了 linear 会默认缓动，看着像卡顿。
常见错误现象：图标转半圈就停、转得忽快忽慢、首次加载时闪一下才开始。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 必须包含三个基础值：
spin（动画名）、1s（时长）、linear（匀速） -
infinite要显式写上，别依赖浏览器默认行为 - 如果元素是内联标签（如
<span></span>），记得先设display: inline-block或block，否则transform可能无效
.loader {
width: 20px;
height: 20px;
border: 2px solid #ccc;
border-top-color: #333;
border-radius: 50%;
animation: spin 1s linear infinite;
}
为什么推荐用 border 画圆而不是 background
很多新手想用背景图或伪元素做旋转，结果发现要么转不动，要么边缘糊。根本原因是：纯色边框 + border-radius: 50% 是最轻量、最稳定、兼容性最好的方案。
使用场景限制很明确：只要不需要复杂纹理或渐变，就别折腾 SVG 或 canvas。移动端尤其要注意。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
border-top-color单独设色，做出“只有顶部在动”的视觉效果，比全色旋转更像加载中 - 避免用
box-shadow模拟圆环，它在低分辨率屏上容易发虚 - 别给
border设不同宽度（比如border: 2px 4px），会导致圆不正
IE 和旧版 Safari 的旋转兼容性怎么处理
IE10+ 和 Safari 9+ 基本没问题，但 IE9 及更早版本不支持 @keyframes 和 transform。如果你的项目还要求兼容 IE9，就得换思路。
性能影响很小，但兼容性断层很真实：加了前缀也不行，因为 IE9 根本不解析 @keyframes 规则。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 现代项目直接忽略 IE9；若必须支持，改用 GIF 图片方案，别硬扛 CSS
- 不要加
-webkit-等前缀——现在所有主流引擎都支持无前缀@keyframes和transform - 测试时用真机或 BrowserStack，别信“开发者工具切 UA”模拟出来的效果
