17370845950

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 图标（比如一个 ），添加动画属性：

.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 配合到位，旋转就会自然流畅。