Question

我正在尝试创建一个旋转加载圈。我希望在旋转结束时缩短红色，就像现在一样：

我使用另一个带有白色边框颜色的微调器来实现这种效果，但是当白色边框覆盖在它上面时，我可以看到边框上有微小的红色。如何在边框上移除这种微小的红色？

@keyframes top-cricle {
  from {
    transform: rotate(-25deg);
  }
  to {
    transform: rotate(335deg);
  }
}
@keyframes bottom-cricle {
  from {
    transform: rotate(-15deg);
  }
  to {
    transform: rotate(345deg);
  }
}
html {
  background-color: white;
}
.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  line-height: 30px;
  .spinner {
    padding-right: 35px;
    & > span {
      display: inline-block;
      position: absolute;
      border-radius: 100px;
      padding: 8px;
      border: 5px solid transparent;
      &.top {
        border-top: 5px solid white;
        animation: top-cricle 1s ease-in-out infinite;
        animation-delay: 0.2s;
      }
      &.bottom {
        border-top: 5px solid #c23531;
        animation: bottom-cricle 1s ease-in-out infinite;
      }
    }
  }
}

Answer 1

阐述我在评论中所说的内容，我不确定是否可以这样做，特别是考虑到对象太小（没有太大的调整空间）。

相反，您可以做的是创建一系列较小的片段，这些片段相互叠加并共享相同的颜色。

这是我根据你的代码制作的粗略小提琴 https://jsfiddle.net/mz41spv4/2/更改如下

  .spinner {
    padding-right: 35px;
    & > span {
      display: inline-block;
      position: absolute;
      border-radius: 100px;
      padding: 8px;
      border: 5px solid transparent;

      animation: top-cricle 1s ease-in-out infinite;
      border-top: 5px solid #c23531;

      &:nth-child(1) {
        animation-delay: -0.15s;
      } 
   }
}

你可能想要更多地调整尺寸，但核心概念就在那里，希望你可以调整它以适合你的需要。

该解决方案的归功于https://loading.io/css/。您也可以使用这些开源图标

Answer 2

我只是将白色border-top的动画延迟增加到0.5秒，问题就解决了。似乎延迟有点偏离关键（如果我允许在此上下文中使用此表达式）

&.top {
    border-top: 5px solid white;
    animation: top-cricle 1s ease-in-out infinite;
    animation-delay: 0.5s;
  }

https://jsfiddle.net/mz41spv4/4/

旋转圆CSS

2 个答案: