如何使用css3制作动画圆弧答案

【问题标题】：how to make animated arc using css3如何使用css3制作动画圆弧
【发布时间】：2013-11-08 05:48:32
【问题描述】：

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

这是我的小提琴 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 之类的任何值。这就是我的看法

【问题讨论】：

这很酷，但我仍然觉得 SVG 动画是要走的路，因为它更强大且支持更好。试试 raphaeljs.com
我试过但不知道怎么解决
嘿桑。它能为您提供帮助吗？如果您需要，我可以制作 svg 版本。
嘿 Benton 非常感谢，但我设法做到了。你可以看看。认为这不是一种整洁的做法。你可以看看。只需向下滚动到名为投资的部分spheretekk.com/avenue/animate 只是为了教育，你能给我看一个 svg 的小演示

标签： css css-transitions css-animations css3pie

【解决方案1】：

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

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

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

Demo

.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);}
}

【讨论】：

我添加了一个截图，你的演示没有动画。缺少什么？
@San 编辑了我的答案
我不是要找js版本的。
@San 你想填充圆弧还是想在圆弧上移动一个对象？
嗨，外星人先生，我想移动灰色，让它看起来像灰色正在用叉子单独填充白色。希望你能理解我

【解决方案2】：

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

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

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

【讨论】：