甜橘子，专注成都网站制作网站设计与营销型网站建设与优化
QQ :532337155
电话：028-86922220
这篇文章给大家分享的是有关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 solid; border-radius: 50%;
* 画扇形不可以定义宽度和长度,其余与画圆弧相同
3.less 封装画圆弧和扇形的代码
.arc(@direction,@style){
@color:~`"@{style}".split(/,\s+/)[1]`;
@width:~`"@{style}".split(/,\s+/)[0].replace("[","")`;
@shape:~`"@{style}".split(/,\s+/)[2].replace("]","")`;
border: @width transparent @shape;
@length:length(@direction);
.setStyle(@length,@style,@direction);
border-radius: 50%;
.setStyle(@length,@style,@direction) when (@length>0){
@index:@length - 1;
@pos:extract(@direction,@length);
border-@{pos}:@style ;
.setStyle(@index,@style,@direction);
}
}
//使用方式:
@driection 可以是top、left、right、bottom中的一个或多个
@style 需要严格按照 7px solid red 这样的顺序
.arc(left,7px solid red);
.arc(left top,7px solid red);4.加载动画的完整代码
Document
感谢各位的阅读！关于CSS如何实现圆弧和扇形的加载动画就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到吧！