CCS实现loading加载效果

body

    <div class="box">
        <div></div>
        <div></div>
        <div></div>
    </div>

css

<style>
        body {
           background: sandybrown;
       }
       .box {
           width: 100px;
           margin: 50px auto;
       }
       .box>div:nth-child(1) {
           float: left;
           width: 15px;
           margin-left: 10px;
           height: 15px;
           background: #fff;
           border-radius: 50%;
           animation:wys 0.8s infinite;
       }
       .box>div:nth-child(2){
           float: left;
           width: 15px;
           margin-left: 10px;
           height: 15px;
           background: #fff;
           border-radius: 50%;

           animation:wys 0.8s infinite 0.15s;
       }
       .box>div:nth-child(3){
           float: left;
           width: 15px;
           margin-left: 10px;
           height: 15px;
           background: #fff;
           border-radius: 50%;

       //调用：
       //animation: 动画名称 持续时间；
       //animation: 定义的动画名称 持续时间  执行次数  是否反向  运动曲线 延迟执行。(infinite 表示无限次)

           animation:wys 0.8s infinite 0.3s;
       }
       //定义动画：
       //@keyframes 动画名{
       //    from{ 初始状态 }
       //    to{ 结束状态 }
       //}

       @keyframes wys{
           100%{
               transform: scale(1);
           }

           50%{
               transform: scale(0.3);
           }

           0%{
               transform: scale(1);
           }
       }

   </style>