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

作者Benji Stander，編寫語言Jade/SCSS/JS

作者M(jìn)ohan Khadka，編寫語言HTML/CSS

作者M(jìn)atthew Juggins,編寫語言HTML/SCSS/JS

作者Petr Tichy,編寫語言HTML/SCSS/JS

（二）動(dòng)效制作&詳解（詳解見注釋?。。。?/h3>

作者 本文小編redBlue_，編寫語言HTML/SCSS

HTML

<div class='Loader'>
  <div class='Element'><div class='Dot'></div></div>
  <div class='Element'><div class='Dot'></div></div>
  <div class='Element'><div class='Dot'></div></div>
  <div class='Element'><div class='Dot'></div></div>
</div>
/*想要多少div可以自己加，都是重復(fù)代碼小編就不復(fù)制了，
還可以用haml寫，好處是非常簡(jiǎn)潔(haml代碼分享見文章結(jié)尾)*/ 

SCSS

搭建基本形

perspective屬性

$n: 37;
$t: 1s;
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color:#232829;
}
/*$聲明變量*/
.Loader {
  display: flex;
  transform-style: preserve-3d;
  perspective: 15rem;
}
/*transform-style: preserve-3d簡(jiǎn)單說就是一個(gè)呈現(xiàn)3D效果的屬性，
perspective: 15rem;在3D空間中Z平面和用戶之間的距離（如圖perspective屬性）*/
.Element {
  width: 1.2rem;
  height: 1.2rem;
  margin: 0 -.3em;
  animation: rotate $t*3 linear infinite;
  transform-style: preserve-3d;
}

.Dot {
  width: 100%;
  height: 100%;
  transform: translateZ(-2.5rem);
  transform-style: preserve-3d;
  //animation: scale $t/2 ease-in-out infinite alternate;
  &::before {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 1% 30%;
    background-color: #ec7045;
    
    content: '';
  }
}

.Element:nth-child(2n) .Dot::before {
  background-color:#ddcaa0;
}
/*.Element:nth-child(2n) 匹配.
Dot::before中元素顏色每隔一個(gè)就變成#ddcaa0色，
*n* 可以是數(shù)字、關(guān)鍵詞或公式。*/

2.加入動(dòng)畫

最終效果

@for $i from 1 through $n {
  $delay: $t / $n * $i * -5;
  .Element:nth-child(#{$i}),
  .Element:nth-child(#{$i}) .Dot::before {
    animation-delay: $delay;
  }
  .Element:nth-child(#{$i}):nth-child(2n),
  .Element:nth-child(#{$i}):nth-child(2n) .Dot::before {
    animation-delay: $delay - ($t * .5);
  }
}

/*for循環(huán)，變量$i遍歷37個(gè)<div>,給每個(gè)<div>都加了$delay（延遲），$t / $n * $i * -5是延遲時(shí)間，
變量i增加$n次也就是37次，每次增加1，所以延遲的時(shí)間也是等比例增加的*/

@keyframes rotate {
  to {
    transform: rotateX(360deg)
  }
}
/*每個(gè)Dot旋轉(zhuǎn)360度*/
@keyframes scale {
  from {
    transform: scale(1)
  }
  to {
    transform: scale(.5)
  }
}

HAML(分享)

.Loader
  - 25.times do
    .Element
      .Dot

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

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