圆弧和扇形的加载动画该怎么写？-

0.静态结果图1.画弧度的代码width:3em;height:3em;border:7pxtransparentsolid;border-left:7px#4DB6ACsolid;border-radius:50%;*这里还有另一个方式border-left:7px#4DB6ACsolid;border-radius:50%;bor 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);

View Code

4.加载动画的完备代码

View Code

5.声明

案例代码是我从网上看到的，我本人摹仿了一下但不管结果和办法上都不如前者。

快慰的是能够晓得道理，只是细节之处还需训练。

以上就是圆弧和扇形的加载动画该怎么写？的细致内容，更多请关注 百分百源码网 其它相干文章！