css - 纯CSS绘制动画圆弧

Question

我知道可以在 SVG 和 Canvas 中绘制圆弧并为其设置动画。但是，在 CSS 中可能吗？

我使用以下方法创建了一个圆弧:

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

但是，我该如何制作动画呢？我能想到的唯一方法是在它上面放一个纯白色的 div，然后将该 div 向右滑动，逐渐露出弧线。有没有更好的办法？

Answer 1

你可能想看看这篇文章，Chris Coyier 做了一篇关于饼图动画的文章，如果你去掉浅蓝色背景，它与你的演示基本相同。

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

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