CSS3 微调器，预加载器答案

【问题标题】：CSS3 spinner, preloaderCSS3 微调器，预加载器
【发布时间】：2014-08-20 12:08:36
【问题描述】：

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

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

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

现在，如何在所描述的状态之间为微调器设置动画？我不知道如何为 clip-rect 属性设置动画。我也猜想使用剪辑多边形（可能是三角形）会表现得更好，但我也无法为其设置动画。

【问题讨论】：

你试过了吗？如果是，请发布您的代码。另外，第四张图片之后的状态是什么？
感谢您的评论。我更新了我的答案
或查看link。
谢谢。您的最后一个链接绝对是我想要的。我希望它能在移动设备上运行，并且足够流畅。一旦我到处测试过，我会告诉你的
别担心，伙计。这个答案更好，这也是我没有发布我的答案的部分原因:)

标签： css css-animations css-transforms css-shapes

【解决方案1】：

CSS3 微调器

这个 CSS 预加载器使用关键帧动画和transform-rotateCSS3 属性来制作圆形和填充颜色。

这个微调器是响应式的。

.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

【讨论】：