loading加载事件的动画

作者：马光佳
撰写时间：2019.1.20

1、搭建结构的HTML代码如下：

@*背景渐变*@
<div class="wrapper">
    @*文字*@
    <div class="logo">loading</div>
    <div class="dots animate" id="dots">
        <div class="dot"></div>@*div创建正方形*@
        <div class="dot"></div>@*div创建正方形*@
        <div class="dot"></div>@*div创建正方形*@
        <div class="dot"></div>@*div创建正方形*@
        <div class="dot"></div>@*div创建正方形*@
    </div>
</div>

2、结构布局的样式

 .wrapper *{
    /* 将wrapper内的元素全部居中 */
    left:50%;top:50%;position:fixed;
    transform: translate3d(-50%,-50%,0) rotate(0deg);/*x轴，y轴，z轴*/
}
/*loading文字的设置*/
.logo{
    color:#fff;font-size: 30px;
    font-weight:bolder;/*文字加粗*/
}
.wrapper .dots .dot{/*正方形*/
    height:300px;
    width:300px;
}
/*利用伪元素实现小球*/
.wrapper .dots .dot:after{
    content:"";
    display:inline-block;
    width:60px;
    height:60px;
    background-color:#fff;
    border-radius:50%;
    position:absolute;
    transform: scale(0.17);/*设置为原来大小的0.17倍*/
}

3、设置五个小球的位置代码如下：

/*第一个小球的位置*/
    .wrapper .dots .dot:nth-child(1) {/*nth-child()子元素选择第一个*/
        top: 129px;
        left:-197px;
        animation-delay: 0s;
    }
     /*第二个小球的位置*/
    .wrapper .dots .dot:nth-child(2) {
        top:-142px;
        left:-183px;
        animation-delay:0.25s;/*利用animation-delay设置小球延时运动*/
    }
    /*第三个小球的位置*/
    .wrapper .dots .dot:nth-child(3) {
        top:-156px;
        left:-131px;
        animation-delay:0.5s;/*利用animation-delay设置小球延时运动*/
    }
    /*第四个小球的位置*/
    .wrapper .dots .dot:nth-child(4) {
        top:148px;
        left:191px;
        animation-delay:0.75s;/*利用animation-delay设置小球延时运动*/
    }
    /*第五个小球的位置*/
    .wrapper .dots .dot:nth-child(5) {
        top:-130px;
        left:180px;
        animation-delay:1s;/*利用animation-delay设置小球延时运动*/
    }

4、五个小球伪类的设置

/*第一个小球*/
    .wrapper .dots .dot:nth-child(1):after {
        transform-origin: top right;
        top: 0;
        right: 0;
        animation-delay: 0s;/*利用animation-delay设置小球延时运动*/
    } 
    /*第二个小球*/
    .wrapper .dots .dot:nth-child(2):after{
        bottom:0;
        right:0;
        transform-origin: bottom right;
        animation-delay:0.25s;/*利用animation-delay设置小球延时运动*/
    }
    /*第三个小球*/
    .wrapper .dots .dot:nth-child(3):after{
        bottom:0;
        right:0;
        transform-origin: bottom right;
        animation-delay:0.5s;/*利用animation-delay设置小球延时运动*/
    }
    /*第四个小球*/
    .wrapper .dots .dot:nth-child(4):after{
        top:0;
        left:0;
        transform-origin: top left;
        animation-delay:0.75s;/*利用animation-delay设置小球延时运动*/   
    }
    /*第五个小球*/
    .wrapper .dots .dot:nth-child(5):after{
        bottom:0;
        left:0;
        transform-origin: bottom left;
        animation-delay:1s;/*利用animation-delay设置小球延时运动*/   
    }

5、正方形动画的代码

/* 设置每一个元素的运动 ，父级旋转一圈转360deg 带着小球转一圈*/
    .wrapper .dots.animate .dot{
        animation:loading-block 2.5s ease-in-out 1;
    }
     /* 小球父级动画为旋转一周(正方形旋转带动小球旋转) */
    @@keyframes loading-block {
        0% {
            transform: translate3d(-50%,-50%,0) rotate(0deg);        
        }
        100% {
            transform: translate3d(-50%,-50%,0) rotate(360deg);
        }
    }

6、小球设置动画

/*小球设置动画*/
    .wrapper .dots.animate .dot:after{
        animation:loading-dot 2.5s ease-in-out 1;
    }
    /* 小球动画的缩放 */
    @@keyframes loading-dot {
        0% {
            transform:scale(0.17);        
        }
        50% {/*从小变大，再变小*/
            transform:scale(1);
        }
        100% {
            transform:scale(0.17);                
        }
    }

7、用js代码设置小球的无限循环运动

//声明变量获取id为dots的div
  var dots = document.getElementById('dots');
  setInterval(function () {
      dots.classList.remove('animate');
      // 下一次运动需要等待所有小球都运动结束进行下一次运动
      // 父级具有class类名为animate下的子级可以进行运动
      // 通过控制animate类名控制子元素的运动
      setTimeout(function () {
          dots.classList.add('animate');
      }, 200);//延迟200毫秒
  }, 3750);//3750毫秒是背景动画7.5s的一半

8、背景渐变的设置；代码如下：

/* 宽高100% 背景设置线性渐变 */
.wrapper{
   width:100%;height:100%;
   background: linear-gradient(45deg,#6fc7b5 0%,#13bdce, 20%,#0094d9 40%, #5a3694 60%, #ee4d74 80%, #f58c58 100%);
   /* 将背景放大 */
   background-size: 400%;
   /* 设置定位显示背景左下角颜色区域 */
   background-position:0% 100%;
   position:relative;
   /* 设置无限轮播动画 */
   animation:gradient 7.5s ease-in-out infinite;
}
/* 背景渐变为修改背景定位 */
 @keyframes gradient {
     0% {
         background-position: 0% 100%;
     }
     50% {
         background-position: 100% 0%;
     }
     100% {
         background-position: 0% 100%;
     }
 }

9、完成的动画效果图：