CSS3微调器，预加载器

Question

我想用CSS3构建一个动画微调器。 它的行为应该是这样的：

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

我设法使用此处说明的技术创建圈子：stackoverflow question

现在，如何在所描述的状态之间为微调器设置动画？我不知道如何为clip-rect属性设置动画。我也猜测它会更好地使用clip-poly（可能是一个三角形），但我也无法为它设置动画。

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