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

（一）牛人动效

作者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

/友情提示：如果觉得此文有难度，请看小编之前文章（难度较低）或自行洗洗睡了～/

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