CSS 加载器微调器在 donut 部分之间添加白色分隔线

Question

我正在尝试在蓝色和黑色之间添加一些白色分隔线。请看下面的 GIF 动画。请在 jsbin 中编辑我的 CSS 以模仿图像中的相同动画。我只需要这个动画的 CSS 版本，不需要 SVG 或 JS。

.spinner {
   height:60px;
   width:60px;
   animation: rotation 10s infinite linear;
   border-left:7px solid rgba(0,0,0,1);
   border-right:7px solid rgba(0,0,0,1);
   border-bottom:7px solid rgba(0,174,239,1);
   border-top:7px solid rgba(0,174,239,1);
   border-radius: 100%;
}

@keyframes rotation {
   from {transform: rotate(0deg);}
   to {transform: rotate(359deg);}
}

http://jsbin.com/ziniwexuwi/edit?html,css,output

Answer 1

请检查更新后的代码。我希望它对你有用。

.spinner {
   height:62px;
   width:62px;
   border-left:7px solid rgba(0,0,0,1);
   border-right:7px solid rgba(0,0,0,1);
   border-bottom:7px solid rgba(0,174,239,1);
   border-top:7px solid rgba(0,174,239,1);
   border-radius: 100%;
   border-spacing: 1px;
   position: relative;
   animation: rotation 1s infinite linear;
}

.spinner span {
  height: 7px;
  width: 2px;
  background: #fff;
  position: absolute;
  z-index: 1;
}

.spinner .a {
  left: 6px;
  top:3px;
  transform: rotate(-47deg);
}

.spinner .b {
  right: 6px;
  top:3px;
  transform: rotate(47deg);
}

.spinner .c {
  left: 6px;
  bottom: 3px;
  transform: rotate(47deg);
}

.spinner .d {
  right: 6px;
  bottom: 3px;
  transform: rotate(-47deg);
}

@keyframes rotation {
   from {transform: rotate(0deg);}
   to {transform: rotate(359deg);}
}

<div class="spinner">
<span class="a"></span>
<span class="b"></span>
<span class="c"></span>
<span class="d"></span>
</div>