（一）牛人動效
作者Benji Stander粹舵，編寫語言Jade/SCSS/JS
作者Mohan Khadka眼滤，編寫語言HTML/CSS
作者Matthew Juggins,編寫語言HTML/SCSS/JS
作者Petr Tichy,編寫語言HTML/SCSS/JS
（二）動效制作&詳解（詳解見注釋Ｗ缧琛！Ｕ敝ぁ）
作者 本文小編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寫概漱，好處是非常簡潔(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簡單說就是一個呈現(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中元素顏色每隔一個就變成#ddcaa0色照弥，
*n* 可以是數(shù)字进副、關(guān)鍵詞或公式。*/
2.加入動畫
最終效果
@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個<div>,給每個<div>都加了$delay（延遲）矫户，$t / $n * $i * -5是延遲時間吏垮，
變量i增加$n次也就是37次，每次增加1膳汪，所以延遲的時間也是等比例增加的*/
@keyframes rotate {
to {
transform: rotateX(360deg)
}
}
/*每個Dot旋轉(zhuǎn)360度*/
@keyframes scale {
from {
transform: scale(1)
}
to {
transform: scale(.5)
}
}
HAML(分享)
.Loader
- 25.times do
.Element
.Dot
/友情提示：如果覺得此文有難度遗嗽，請看小編之前文章（難度較低）或自行洗洗睡了～/
結(jié)束（下期更精彩喲～～～）
