（一）牛人動(dòng)效

作者Andy Tran,編寫語(yǔ)言HTML(Jade)/CSS(SCSS)/JS(Babel)

作者Rupert Breheny,編寫語(yǔ)言HTML/CSS/JS

作者The Suitcase,編寫語(yǔ)言HTML(Jade)/CSS(SCSS)

作者Fabrizio Cuscini,編寫語(yǔ)言HTML(Jade)/CSS(SCSS)

作者M(jìn)assimiliano Ranauro,編寫語(yǔ)言HTML/CSS(SCSS)

作者 小編redblue_剿另，編寫語(yǔ)言HTML/CSS(SCSS)

（二）動(dòng)效制作&詳解（詳解見注釋！１嵬堋Ｓ昱）

總結(jié)筆記(動(dòng)態(tài)更新)
http://www.reibang.com/p/7ebd24b67386

HTML

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

SCSS

1.設(shè)置變量$和@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.搭建基本形

Screen Shot on 2016-09-18 at 10:50:22.png

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.加入動(dòng)畫

最終效果

關(guān)鍵幀參考：Timing(時(shí)間)，Spacing(距離)

@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;
  }

}

/友情提示：如果覺得此文有難度阳准，請(qǐng)看小編之前文章（難度較低）或自行洗洗睡了～/

結(jié)束（下期更精彩喲～～～）