CSS3微调器，预加载器

Question

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

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

我设法使用这里解释的技术创建圈子： stackoverflow问题

现在， 我如何在所描述的状态之间为微调器设置动画？ 我不知道如何为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> 

小提琴演示