动效篇（7）－－CSS极简动效鉴赏与制作（难度＋1！）

（一）牛人动效

（二）动效制作&详解（详解见注释！！！）

HTML

<div class="loader">
  <div class="ball"></div>
  <div class="box">loading......</div>
</div>

SCSS

1.设置变量$和@mixin

$fg:#ff4081;
$bg:#3f51b5;
$sg:#ffc107;
$lg:skyblue;
$kg:#ddcaa0;
@mixin inBody{
  width:100%;
  height:100vh;  
  display:block;
  margin:0;
  background:$bg;
  justify-content:center;
  text-align:center;
  display:flex;
}

2.搭建基本形

body{
  @include inBody
}
.loader{
  top: 15%;
  height:80vh;
  position: absolute;
  justify-content:center;
  text-align:center;
}
.ball{
  left:45px;
  top:30px;
  width:60px;
  height:60px;
  border-radius:70px;
  background: tomato;
  animation: jump 3s linear infinite;
  transform:scale(1,1.1);
  position: relative;
}
.box{
  width:160px;
  height:30px;
  top:160px;
  background:$kg;
  justify-content:center;
  text-align:center;
  position: relative;
  border-radius:30px;
  line-height:30px;
}

2.加入动画

@keyframes jump {
    0% {
        top: 0;
    width:60px;
    height:60px;
    border-radius:5px 5px 5px 5px;
    animation-timing-function: ease-out;
    transform:rotate(0deg);
    background:$fg;
    }
    4% {
        top: 50;
    width:60px;
    height:60px;
    transform:rotate(40deg);
    animation-timing-function: ease-out;
    }  
    13% {
        top: 110;
    width:60px;
    height:60px;
    animation-timing-function: ease-out;
    }  
    16% {
        top: 150px;
    width:60px;
        height: 60px;
    transform:rotate(135deg);
        animation-timing-function: ease-out;
    }  
    19% {
        top: 110;
    width:60px;
    height:60px;
    animation-timing-function: ease-out;
    }
    29% {
        top: 50;
    width:60px;
    height:60px;
    transform:rotate(20deg);
    border-radius:5px 5px 5px 5px;
    animation-timing-function: ease-out;
    background:$fg;
    }  
    32% {
        top: 0px; 
        height: 60px; 
        border-radius:5px 5px 5px 100px;
    transform:rotate(0deg);
    background:$lg;
    }
    35% {
        top: 50;
    width:60px;
    height:60px;
    animation-timing-function: ease-out;
    } 
    45% {
        top: 110;
    width:60px;
    height:60px;
    animation-timing-function: ease-out;
    }  
    48% {
        top: 160px; 
        height: 60px; 
    transform:rotate(-180deg);
        animation-timing-function: ease-out;
    background:$lg;
    }
    51% {
        top: 110;
    width:60px;
    height:60px;
    animation-timing-function: ease-out;
    }  
    61% {
        top: 50;
    width:60px;
    height:60px;
    border-radius:5px 5px 5px 100px;
    animation-timing-function: ease-out;
    background:$lg;
    }  
  64% {
        top: 0;
    width:60px;
    height:60px;
    transform:rotate(0deg);
    border-radius: 70px;
    background:$sg;
    }
    69% {
        top: 50;
    width:60px;
    height:60px;
    animation-timing-function: ease-out;

    }
    77% {
        top: 110;
    width:60px;
    height:60px;
    animation-timing-function: ease-out;
    }  
    80% {
        top: 160px;
    width:60px;
        height: 60px;
    transform:rotate(180deg);
        animation-timing-function: ease-out;
    }
  83% {
        top: 110;
    width:60px;
    height:60px;
    animation-timing-function: ease-out;
    } 
    97% {
        top: 50;
    width:60px;
    height:60px;
    border-radius: 70px;
    animation-timing-function: ease-out;
    background:$sg;
    }  
    100% {
        top: 0px; 
        height: 60px; 
    transform:rotate(0deg);
        border-radius:5px 5px 5px 5px;
    background:$fg;
  }

}

结束（下期更精彩哟～～～）