用纯CSS绘制动画弧 [英] Drawing animated arc with pure CSS

问题描述

我知道可以在svg和canvas中绘制和动画弧。

我已经使用以下方法创建了一个弧：
 >  .arc {
 width：150px; 
 height：400px; 
 border-radius：50％; 
 border-right：1px solid black; 
 border-left：1px solid black; 
 border-top：1px solid black; 
 border-bottom：1px solid white; 
} 
  

原始小提琴：

演示： http://codepen.io/HugoGiraudel/pen/BHEwo

I know it is possible to draw and animate arcs in svg and canvas. However, is it possible in css?

I have created an arc using the following method:

.arc{
    width:150px;
    height:400px;
    border-radius:50%;
    border-right:1px solid black;
    border-left:1px solid black;
    border-top:1px solid black;
    border-bottom:1px solid white;
}

Original Fiddle: http://jsfiddle.net/YGKWT/ (Broken link)

But, how can I animate this? The only way I can think of is having a pure white div over it and sliding that div to the right gradually revealing the arc. Is there a better way?

Edit:

Here is the type of animation I am looking for: http://jsfiddle.net/nQLY7/ (Broken link)

解决方案

You might want to check out this article, Chris Coyier has done a article on pie chart animation which is basically the same as your demo if you remove the light blue background.

Article: http://css-tricks.com/css-pie-timer/

Demo: http://codepen.io/HugoGiraudel/pen/BHEwo

这篇关于用纯CSS绘制动画弧的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！