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

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.加载动画的完整代码

!DOCTYPE htML>
    html lang="en">
    head>
    meta charset="UTF-8">
    title>
    Document/title>
    style>
 html,body {
      overflow: hidden;
      width: 100%;
      height: 100%;
}
.container {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      -webkit-box-pack: space-around;
      -ms-flex-pack: space-around;
      justify-content: space-around;
      margin: 0 auto;
      max-width: 650px;
      min-width: 200px;
}
.container .canvas {
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      background: #eee;
      border-radius: 50%;
      -webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
      box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
      height: 10em;
      width: 10em;
      margin: 1em 1em 2em 1em;
}
.container .canvas .spinner4 {
      width: 3em;
      height: 3em;
      border: 7px transparent solid;
      border-left: 7px #4DB6AC solid;
      border-radius: 50%;
      -webkit-animation: spinner4 1s linear infinite;
      animation: spinner4 1s linear infinite;
}
@-webkit-keyframes spinner4 {
  100% {
                -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
        @keyframes spinner4 {
  100% {
                -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
        .container .canvas .spinner5 {
      border: 1.5em transparent solid;
      border-right: 1.5em #4DB6AC solid;
      border-left: 1.5em #4DB6AC solid;
      border-radius: 50%;
      -webkit-animation: spinner5 1s linear infinite;
      animation: spinner5 1s linear infinite;
}
@-webkit-keyframes spinner5 {
  0% {
                transform: rotate(0deg);
  }
  50% {
    transform: rotate(60deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
        @keyframes spinner5 {
  0% {
                transform: rotate(0deg);
  }
  50% {
    transform: rotate(60deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
        .container .canvas .spinner6 {
      width: 1em;
      height: 1em;
      border-radius: 50%;
      background-color: #4db6ac;
      margin: 0.1em;
      -webkit-animation: fall 1s linear infinite;
      animation: fall 1s linear infinite;
}
            /style>
    /head>
    body>
    div class="container">
    div class="canvas">
    div class="spinner4">
    /div>
    /div>
    div class="canvas">
    div class="spinner5">
    /div>
    /div>
    /div>
    /body>
    /html>
    

5.声明

案例代码是我从网上看到的，我自己模仿了一下但无论效果和方法上都不如前者。

欣慰的是能够知道原理，只是细节之处还需练习。

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

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！