2

我已经制作了这条弧线，但我无法对其进行动画处理。你能解释一下如何去做吗

这是我的小提琴 http://jsfiddle.net/cancerian73/23Wjj/

.circle {
width: 60px;
height: 60px;
border-style: solid;
border-radius: 35px;
border-width: 5px;
border-color: #999 transparent transparent transparent;
}
.arc-top {
border-color: #999 transparent transparent transparent;
}

刚刚添加了一个屏幕截图，我想将灰色从 0 填充到 100 或 0 到 60 之类的任何东西。这就是我的看法 在此处输入图像描述

4

2 回答 2

2

正如您评论的那样，请在此处参考我的答案，这与您要查找的内容相似。

演示（我在链接的问题上回答的小提琴的修改版本）

你甚至在哪里为弧设置动画？@keyframe这里我使用带有属性的CSS3 ，并将元素旋转 3 个部分，transform即 at和. 休息是不言自明的，它将控制动画的总持续时间，将动画设置为，这里的最后一个对于动画获得一致的流程很重要。0%50%100%animation-durationanimation-iteration-countinfiniteanimation-timing-function

演示

.circle {
   -webkit-animation-duration: 5s;
   -webkit-animation-name: animation;
   -webkit-animation-iteration-count: infinite;
   -webkit-animation-timing-function: linear;

   -moz-animation-duration: 5s;
   -moz-animation-name: animation;
   -moz-animation-iteration-count: infinite;
   -moz-animation-timing-function: linear;

   animation-duration: 5s;
   animation-name: animation;
   animation-iteration-count: infinite;
   animation-timing-function: linear;
   width: 60px;
   height: 60px;   
   border-style: solid;
   border-radius: 35px;
   border-width: 5px;
   border-color: #999 transparent transparent transparent;
}
.arc-top { border-color: #999 transparent transparent transparent;}

@-moz-keyframes animation {
    0% {-moz-transform: rotate(0);}
    50% {-moz-transform: rotate(180deg);}
    100% {-moz-transform: rotate(360deg);}
}

@-webkit-keyframes animation {
    0% {-webkit-transform: rotate(0);}
    50% {-webkit-transform: rotate(180deg);}
    100% {-webkit-transform: rotate(360deg);}
}

@keyframes animation {
    0% {transform: rotate(0);}
    50% {transform: rotate(180deg);}
    100% {transform: rotate(360deg);}
}
于 2013-11-08T05:55:38.627 回答
0

请尝试这段代码，但您可能需要进行一些修改，

工作演示http://codepen.io/anon/pen/Jtepx

这是从 CSS 3 技巧修改而来的http://css-tricks.com/css-pie-timer/

于 2013-11-08T06:36:47.063 回答