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

问题描述

我知道这是可能的绘制和动画的SVG和画布弧线。但是，是否有可能在CSS？

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

原件小提琴：
http://jsfiddle.net/YGKWT/

但是，我怎么能这样的动画？我能想到的唯一的办法是有一个纯白色的div它，并滑动该div向右逐渐显露出的弧线。有没有更好的办法？

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?

编辑：

下面是动漫我要找的类型：
http://jsfiddle.net/nQLY7/

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

推荐答案

您可能想看看这篇文章，克里斯Coyier做的饼图动画的文章基本上是一样的您的演示，如果你删除浅蓝色背景

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.

文章： http://css-tricks.com/css-pie-timer/

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

演示：<一href=\"http://$c$cpen.io/HugoGiraudel/pen/BHEwo\">http://$c$cpen.io/HugoGiraudel/pen/BHEwo

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