（一）牛人动效
作者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可以自己加，都是重复代码小编就不复制了，
还可以用haml写，好处是非常简洁(haml代码分享见文章结尾)*/
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简单说就是一个呈现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* 可以是数字、关键词或公式。*/
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循环，变量$i遍历37个<div>,给每个<div>都加了$delay（延迟），$t / $n * $i * -5是延迟时间，
变量i增加$n次也就是37次，每次增加1，所以延迟的时间也是等比例增加的*/
@keyframes rotate {
to {
transform: rotateX(360deg)
}
}
/*每个Dot旋转360度*/
@keyframes scale {
from {
transform: scale(1)
}
to {
transform: scale(.5)
}
}
HAML(分享)
.Loader
- 25.times do
.Element
.Dot
/友情提示：如果觉得此文有难度，请看小编之前文章（难度较低）或自行洗洗睡了～/
结束（下期更精彩哟～～～）
