使用纯CSS绘制动画弧

前端之家收集整理的这篇文章主要介绍了使用纯CSS绘制动画弧前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我知道可以在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;
}

原始小提琴:
http://jsfiddle.net/YGKWT/(断链)

但是,我该如何设置动画呢?我能想到的唯一方法就是在它上面放一个纯白色的div,并向右滑动div,逐渐显示出弧线.有没有更好的办法?

编辑:

这是我正在寻找的动画类型:
http://jsfiddle.net/nQLY7/(断链)

解决方法

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

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

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

原文链接:https://www.f2er.com/css/217850.html

猜你在找的CSS相关文章