介绍
.arc (@direction @style) {
@color: ~”“@{风格}“.split (/\ s +/) [1]”;
@width: ~”“@{风格}“.split (/\ s +/) [0] .replace (“[“,““)”;
@shape: ~”“@{风格}“.split (/\ s +/) [2] .replace (“)“,““)”;
边界:@width透明@shape;
@length:长度(@direction);
.setStyle (@length @style @direction);
这个特性:50%;
.setStyle (@length @style @direction)时(@length> 0) {
@index: @length - 1;
@pos:提取(@direction @length);
边境@ {pos}: @style;
.setStyle (@index @style @direction);
}
}//使用方式:
@driection可以是,左,右,中底的一个或多个
@style需要严格按照7 px坚实红色这样的顺序
.arc(左)7 px固体红色);
.arc(左前7 px坚实红色),
& lt; !html DOCTYPE html> & lt; lang=癳n"祝辞& lt; head> & lt;元charset=癠TF-8"祝辞& lt; title> Document & lt; style>html,身体{溢出:隐藏;宽度:100%;高度:100%;}。容器{显示:-webkit-box;显示:-ms-flexbox;显示:flex;-ms-flex-wrap:包装;flex-wrap:包装;-webkit-box-pack:空间;-ms-flex-pack:空间;justify-content:空间;保证金:0汽车;max-width: 650 px;min-width: 200 px;}。容器.canvas {-webkit-box-align:中心;-ms-flex-align:中心;对齐项目:中心;显示:-webkit-box;显示:-ms-flexbox;显示:flex;-webkit-box-pack:中心;-ms-flex-pack:中心;justify-content:中心;背景:# eee;这个特性:50%;-webkit-box-shadow: 0 5 px 20 px rgba (0, 0, 0, 0.2);不必:0 5 px 20 px rgba (0, 0, 0, 0.2);高度:10 em;宽度:10 em;保证金:1 em 1 em 2 em 1 em;}。容器.canvas .spinner4{宽度:3他们;高度:3他们;边界:7 px透明固体;border-left: 7 px # 4 db6ac固体;这个特性:50%;-webkit-animation: spinner4 1 s线性无限;动画:spinner4 1 s线性无限;}@-webkit-keyframes spinner4 {{100%
-webkit-transform:旋转(360度);-ms-transform:旋转(360度);-o-transform:旋转(360度),变换:旋转(360度);}}
@keyframes spinner4 {{100%
-webkit-transform:旋转(360度);-ms-transform:旋转(360度);-o-transform:旋转(360度),变换:旋转(360度);}}
.container .canvas .spinner5{边界:1.5 em透明的固体;边境:1.5 em # 4 db6ac固体;border-left: 1.5 em # 4 db6ac固体;这个特性:50%;-webkit-animation: spinner5 1 s线性无限;动画:spinner5 1 s线性无限;}@-webkit-keyframes spinner5 {{0%
变换:旋转(0度);}50%{变换:旋转(60度);}100%{变换:旋转(360度);}}
@keyframes spinner5 {{0%
变换:旋转(0度);}50%{变换:旋转(60度);}100%{变换:旋转(360度);}}
.container .canvas .spinner6{宽度:1 em;身高:1 em;这个特性:50%;background - color: # 4 db6ac;利润:0.1 em;-webkit-animation:下降1 s线性无限;动画:1 s线性无限;}
& lt;/style> & lt;/head> & lt; body> & lt; div类=癱ontainer"祝辞& lt; div类=癱anvas"祝辞& lt; div类=皊pinner4"祝辞& lt;/div> & lt;/div> & lt; div类=癱anvas"祝辞& lt; div类=皊pinner5"祝辞& lt;/div> & lt;/div> & lt;/div> & lt;/body> & lt;/html>
这篇文章给大家分享的是有关CSS如何实现圆弧和扇形的加载动画的内容。小编觉得挺实用的,因此分享给大家做个参考。一起跟随小编过来看看吧。
, <强> 0。静态效果图
<强> 
<强> 1。画弧度的代码
宽度:3他们; 高度:3他们; 边界:7 px透明固体; border-left: 7 px # 4 db6ac固体; border - radius: 50%;
border-left: 7 px # 4 db6ac固体; 这个特性:50%; border-top: 7 px透明固体; 边界底部:7 px透明固体;
后者做成旋转动画效果不如前者,肉眼能感到差异,在chrome49。
<强> 2。画扇形的代码
边界:7 px透明固体; border-left: 7 px # 4 db6ac固体; border - radius: 50%;
<强> 3。少封装画圆弧和扇形的代码
<强> 4。加载动画的完整代码
感谢各位的阅读!关于CSS如何实现圆弧和扇形的加载动画就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到吧!
