CSS3 微调器、预加载器

Question

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

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

我设法使用此处解释的技术创建圆圈： stackoverflow Question

现在，我如何在所描述的状态之间设置旋转器的动画？我不知道如何为剪辑矩形属性设置动画。我还猜想，如果使用 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>

小提琴演示