如何反转圆形加载动画并消除残留轮廓？

我来帮你搞定这两个问题——把动画从「渐变转全白」改成「全白转渐变」，同时消除那个烦人的细小轮廓。咱们直接看修改后的代码，再一步步解释调整点：

修改后的完整代码 #

CSS #

#circle-loader-wrap {
  overflow: hidden;
  position: relative;
  margin-top: -10px;
  width: 200px;
  height: 200px;
  background: linear-gradient(90deg, #fdbd39,#ee6723,#E06387);
  border-radius: 50%; /* 用50%比固定200px更灵活，适配尺寸变化 */
  box-sizing: border-box; /* 确保内边距/边框不影响整体尺寸计算 */
  /* 移除原有的180度旋转，这是原动画方向的核心，反转后不需要 */
}

#circle-loader-wrap:after {
  content: '';
  position: absolute;
  /* 改用transform精准居中，避免固定像素值带来的渲染偏差 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background-color: white;
}

#circle-loader-wrap div {
  overflow: hidden;
  position: absolute;
  width: 50%;
  height: 100%;
}

#circle-loader-wrap .loader {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 1000px;
  background-color: white;
}

#circle-loader-wrap .left-wrap {
  left: 0;
}

#circle-loader-wrap .left-wrap .loader {
  left: 100%;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  transform-origin: 0 50% 0;
  /* 用forwards替代infinite，让动画结束后停在最终状态 */
  animation: loading-left 10s forwards linear;
}

#circle-loader-wrap .right-wrap {
  left: 50%;
}

#circle-loader-wrap .right-wrap .loader {
  left: -100%;
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  transform-origin: 100% 50% 0;
  animation: loading-right 10s forwards linear;
}

/* 反转左半部分动画关键帧：从覆盖状态转到露出状态 */
@keyframes loading-left {
  0% {
    transform: rotate(180deg); /* 初始：完全覆盖左半侧渐变 */
  }
  50% {
    transform: rotate(180deg); /* 前50%时间等待右半侧完成动画 */
  }
  100% {
    transform: rotate(0deg); /* 最终：完全露出左半侧渐变 */
  }
}

@-webkit-keyframes loading-left {
  0% {
    -webkit-transform: rotate(180deg);
  }
  50% {
    -webkit-transform: rotate(180deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
  }
}

/* 反转右半部分动画关键帧：从覆盖状态转到露出状态 */
@keyframes loading-right {
  0% {
    transform: rotate(180deg); /* 初始：完全覆盖右半侧渐变 */
  }
  50% {
    transform: rotate(0deg); /* 前50%时间转到露出状态 */
  }
  100% {
    transform: rotate(0deg); /* 最终：保持露出状态 */
  }
}

@-webkit-keyframes loading-right {
  0% {
    -webkit-transform: rotate(180deg);
  }
  50% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
  }
}

HTML #

<div class="container mt-5">
  <div class="row">
    <div class="col-3">
      <div id="circle-loader-wrap">
        <div class="left-wrap">
          <div class="loader"></div>
        </div>
        <div class="right-wrap">
          <div class="loader"></div>
        </div>
      </div>
    </div>
  </div>
</div>

关键调整点说明 #

1. 反转动画方向 #

• 移除容器旋转：原代码给#circle-loader-wrap加了180度旋转，这是「渐变转全白」的核心逻辑，反转动画后直接去掉即可。
• 修改初始旋转状态：把左右两个白色loader的初始旋转角度从0deg改成180deg，这样初始时它们会完全覆盖住渐变外圈，整体呈现全白状态。
• 反转关键帧顺序：让右半侧loader在前50%时间从覆盖状态转到露出状态，左半侧loader在后50%时间完成同样的动作，实现从全白到渐变的过渡。
• 替换动画循环模式：把infinite改成forwards，确保动画结束后停在最终的渐变状态，不会重复循环。

2. 消除残留轮廓 #

• 精准居中中间白色圆：原代码用固定的left:15px; top:15px定位，容易因浏览器渲染精度问题出现缝隙。换成top:50%; left:50%; transform: translate(-50%, -50%)可以实现像素级精准居中。
• 统一圆角值：把原代码中固定的200px圆角改成50%，确保容器和内部元素的圆角完全匹配，减少渲染缝隙。
• 添加盒模型规则：给容器加box-sizing: border-box，避免内边距或边框导致的尺寸溢出，进一步消除潜在缝隙。

这样修改后，动画就会从全白状态开始，逐步露出渐变外圈，最后停在完整的渐变状态，同时也不会有残留的细小轮廓了。

内容的提问来源于stack exchange，提问作者Tim Foles