CSS3 微调器、预加载器

Question

我想用 CSS3 构建一个动画微调器。 它应该像这样:

在最后一个状态之后，它应该像第一个状态一样再次开始。

我设法使用这里解释的技术创建了圆圈:stackoverflow question

现在，如何在所描述的状态之间为微调器设置动画？我不知道如何为 clip-rect 属性设置动画。我还猜想如果使用 clip-poly(可能是三 Angular 形)它会表现得更好，但我也不能为它制作动画。

Answer 1

CSS3 微调器

此 CSS 预加载器使用关键帧动画和 transform-rotate CSS3 属性制作圆圈和填充颜色。

这个微调器是响应式的。

.sp1 {
  margin: 50px auto;
  position: relative;
  width: 30%;
  padding-bottom: 30%;
  overflow: hidden;
  background-color: #557733;
  border-radius: 50%;
  z-index: 1;
}

.sp:before,
.sp:after {
  content: '';
  position: absolute;
  height: 100%;
  width: 50%;
  background-color: #99FF33;
}

.sp1:after {
  width: 80%;
  height: 80%;
  margin: 10%;
  border-radius: 50%;
  background-color: #fff;
  z-index: 6;
}

.sp1:before {
  background-color: inherit;
  z-index: 5;
}

.sp2:before {
  z-index: 4;
  -webkit-animation: spin1 3s linear infinite;
          animation: spin1 3s linear infinite;
  -webkit-transform-origin: 100% 50%;
          transform-origin: 100% 50%;
}

.sp2:after {
  opacity: 0;
  right: 0;
  z-index: 6;
  -webkit-animation: spin2 3s linear infinite;
          animation: spin2 3s linear infinite;
  -webkit-transform-origin: 0 50%;
          transform-origin: 0 50%;
}

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

@keyframes spin1 {
  0%         { transform: rotate(0deg); }
  50%, 100%  { transform: rotate(180deg); }
}

@-webkit-keyframes spin2 {
  0% { -webkit-transform: rotate(0deg); opacity: 0; }
  49.99% { opacity: 0; }
  50% { -webkit-transform: rotate(0deg);  opacity: 1; }
  100% { -webkit-transform: rotate(180deg); opacity: 1;
  }
}

@keyframes spin2 {
  0% { transform: rotate(0deg); opacity: 0; }
  49.99% { opacity: 0; }
  50% { transform: rotate(0deg); opacity: 1; }
  100% { transform: rotate(180deg); opacity: 1; }
}

<div class="sp sp1">
  <div class="sp sp2"></div>
</div>

Fiddle demo