Question

我想制作一个像这样的CSS3（首选）或画布微调器http://jsfiddle.net/webtiki/Mwjn9/

但是当浅绿色圆圈完成时，我不想重新开始，我希望圆圈用深绿色填充（就像填充浅绿色一样），然后重新开始。

基本上，圆圈以颜色A开头，填充颜色B，填充颜色A，然后重新开始。

我怎样才能做到这一点？

我尝试以不同的方式编辑这部分，但无法实现。

@-webkit-keyframes spin1 {
    0%   { -webkit-transform:rotate(0deg); }
    50%  { -webkit-transform:rotate(180deg); }
    100% { -webkit-transform:rotate(180deg); }
}
@keyframes spin1 {
    0%   { transform:rotate(0deg); }
    50%  { transform:rotate(180deg); }
    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; }
}

Answer 1

我设法使用画布，使用两个弧

ctx.beginPath();
ctx.arc(x, y, radius, startAngle, endAngle, false);
ctx.lineWidth = 15;
ctx.strokeStyle = color;
ctx.stroke();
ctx.closePath();

并为它们制作动画 http://jsfiddle.net/Rayjax/0ah48htn/1/

如果有人想出一个CSS3解决方案（画布在手机上很慢），我很乐意接受它

CSS3 / Canvas - loader / spinner / preloader

1 个答案: