动效篇（5）－－CSS极简动效鉴赏与制作（实用性＋1！）

（一）牛人动效

作者Ruslan,编写语言HTML/SCSS/JS(Babel)

作者Bennett Feely,编写语言HTML/CSS/JS

作者Brad Bodine,编写语言HTML/SCSS

作者 Collin，编写语言HTML/CSS

作者Mahmoud Elmahdi，编写语言HTML/CSS

作者 本文小编redBlue_，编写语言HTML/SCSS

（二）动效制作&详解（详解见注释！！！）

总结笔记
http://www.jianshu.com/p/7ebd24b67386

HTML

SCSS

1.设置变量$和占位%{}

注意：没加动画前，右边的四个方块在open按钮下边，不是展开的

把一些可以重复用的属性值设置为变量$和占位%{},占位可以理解成把一组东西打包放好，用时就拿。

@import "compass/css3";
//上面的@import命令，用来指定加载模块,这里就是加载css3模块
//$vars变量
$fg:#ff4081;
$bg:#3f51b5;
$pi:3.14;
//config配置
$menu-items:4;

%ball{
  background:$fg;
  border-radius: 5% 5% 5%  5%;
  width:72px;
  height:72px;
  justify-content:center;
  align-items:center;
  position:absolute;
  color:white;
  text-align:center;
  line-height:80px;
  transform:translate3d(0,0,0);
  transition:transform ease-out 200ms;
  left:0;
}

2.搭建基本形

鼠标移入动画

body{
  margin:0;
  background:$bg;
  justify-content:center;
  text-align:center;
  display:flex;
  height:100vh;
  align-items:center;
}
.menu-open{
  display:none;
}
.menu-item{
  @extend %ball;
}
//调用％ball中样式
.hamburger{
  $width:25px;
  $height:3px;
  width:$width;
  height:$height;
  background:white;
  display:block;
  position:absolute;
  top:50%;
  left:50%;
  margin-left:-$width/2;
  margin-top:-$height/2;
  transition:transform 200ms;
}
$hamburger-spacing:8px;
.hamburger-1{
  transform:translate3d(0,-$hamburger-spacing,0);
}
.hamburger-2{
  transform:translate3d(0,0,0);
}
.hamburger-3{
  transform:translate3d(0,$hamburger-spacing,0);
}
//hamburgr3条线变x的动画，上下两条线旋转，中间一条线x轴缩为0.1.
.menu-open:checked+.menu-open-button{
  .hamburger-1{
    transform:translate3d(0,0,0) rotate(45deg); 
  }
  .hamburger-2{
    transform:translate3d(0,0,0) scale(0.1,1);
  }
  .hamburger-3{
    transform:translate3d(0,0,0) rotate(-45deg); 
  }
}
//这个地方一定要设置$hamburger-spacing:8px变量，不能直接写数值，
//然后调用变量transform:translate3d(0,$hamburger-spacing,0);

3.鼠标移入和点击动画

最终效果

贝塞尔曲线

贝塞尔曲线链接 http://cubic-bezier.com/#.17,.67,.83,.43

.menu{
  position:absolute;
  left:50%;
  margin-left:-200px;
  padding-top:40px;
  width:650px;
  height:150px;
  box-sizing:border-box;
  font-size:28px;
  text-align:left;
}
.menu-item{
  &:hover{
    background:#ffc107;
    color:$fg;
  }
  @for $i from 1 through $menu-items{
    &:nth-child(#{$i+2}){
      transition-duration:180ms;
    }
  }
}
//for 循环和 :nth-*() 选择器一起使用，你需要使用插值变量(#{$i+2})，才能最终得到想得到的结果。transition-duration:180ms;过渡效果
.menu-open-button{
  @extend %ball;
  z-index:2;
  transition-timing-function:cubic-bezier(0.175, 0.885, 0.320, 1.275);
  //过度效果的速度曲线值
  transition-duration:400ms;
  transform:scale(1.1,1.1);
  cursor:pointer;
}
//cursor:pointer;鼠标指针经过menu-open-button时变成小手
.menu-open-button:hover{
  transform:scale(1.2,1.2);
}
//划过事件：当鼠标滑过menu-open-button时改变大小为1.2
.menu-open:checked~.menu-open-button{
  $scale:0.8;
  $translate-space:18px;
  transition-timing-function:linear;
  transition-duration:200ms;
  opacity:0.5;
  transform:translate3d(-$translate-space/4,0,0) rotate(90deg) scale($scale,$scale); 
}
//点击事件：当点击menu-open-button时发生括号中的变化，
//transition-duration过渡时间
//过渡效果linear（线性）cubic-bezier贝塞尔曲线值
.menu-open:checked~.menu-item{
  transition-timing-function:cubic-bezier(0.165, 0.840, 0.440, 1.000);
  @for $i from 1 through $menu-items{
    &:nth-child(#{$i+2}){
      transition-duration:190ms+(80ms*$i);
      transform:translate3d((80px*$i),0,0) rotate(360deg);
    }
  }
}

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

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