Css圆形扇形填充动画,CSS如何实现圆弧和扇形的加载动画

CSS如何实现圆弧和扇形的加载动画

发布时间：2020-09-23 15:09:30

来源：亿速云

阅读：126

作者：小新

这篇文章给大家分享的是有关CSS如何实现圆弧和扇形的加载动画的内容。小编觉得挺实用的，因此分享给大家做个参考。一起跟随小编过来看看吧。

0.静态效果图

1.画弧度的代码

width: 3em;

height: 3em;

border: 7px transparent solid;

border-left: 7px #4DB6AC solid;

border-radius: 50%;

* 这里还有另一个方式

border-left:7px #4DB6AC solid;

border-radius: 50%;

border-top:7px transparent solid;

border-bottom:7px transparent solid;

后者做成旋转动画效果不如前者,肉眼能感到差异,在chrome49.

2.画扇形的代码

border: 7px transparent solid;

border-left: 7px #4DB6AC