CSS实现loading图标连续旋转需用@keyframes定义spin动画（0%到100% rotate(0deg)至rotate(360deg)），再通过animation: spin 1s linear infinite应用到.loader元素，配合border-radius:50%和单色边框增强视觉效果。
用 CSS 实现 loading 图标连续旋转，核心是通过 @keyframes 定义一个 360° 的旋转动画，并配合 animation 属性设置无限循环和匀速播放。
定义旋转动画帧
使用 @keyframes 声明一个名为 spin 的动画，从 0% 到 100% 让元素绕 Z 轴转满一圈：
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
应用到 loading 元素上
选中你的 loading 图标（比如一个 <div class="loader"></div>），添加动画属性：
.loader {
width: 24px;
height: 24px;
border: 2px solid #eee;
border-top-color: #007bff; /* 可做颜色区分 */
border-radius: 50%;
animation: spin 1s linear infinite;
}
- spin：对应上面定义的动画名
-
1s：一圈耗时 1 秒，可按需调整（如
0.8s更快） - linear：匀速旋转，避免忽快忽慢
- infinite：无限重复，实现持续转动
小技巧：提升视觉效果
常见 loading 图标多为圆环或点状，可微调增强观感：
立即学习“前端免费学习笔记（深入）”；
- 用
border-radius: 50%确保元素是正圆 - 只设单边颜色（如
border-top-color）能做出“进度式”旋转效果 - 加
will-change: transform或transform: translateZ(0)可启用硬件加速，减少卡顿
兼容性注意
现代浏览器均支持 @keyframes 和 transform。若需兼容老版本 Android 或 IE，可加前缀（如 -webkit-keyframes），但当前主流项目通常无需特别处理。
基本上就这些，不复杂但容易忽略细节——关键是 infinite 和 linear 配合到位，旋转就会自然流畅。
