（一）牛人动效
作者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
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<!--for 一个图标字体的链接，非常好用，支持多种格式和效果可以去网站看看，本文四个icon都是从链接中调用的-->
<nav class="menu">
<input type="checkbox" href="#" class="menu-open" name="menu-open" id="menu-open" />
<label class="menu-open-button" for="menu-open">
<span class="hamburger hamburger-1"></span>
<span class="hamburger hamburger-2"></span>
<span class="hamburger hamburger-3"></span>
</label>
<!--for属性规定 label 与menu-open元素绑定。这里用<nav>标签比较规范-->
<a href="#" class="menu-item"> <i class="fa fa-download"></i> </a>
<a href="#" class="menu-item"> <i class="fa fa-inbox"></i> </a>
<a href="#" class="menu-item"> <i class="fa fa-trash-o"></i> </a>
<a href="#" class="menu-item"> <i class="fa fa-search-plus"></i> </a>
</nav>
<!--fa fa-download这里的四个图标是通过链接font-awesome/4.6.3 icon字体文件得到的-->
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);
}
}
}
/友情提示：如果觉得此文有难度，请看小编之前文章（难度较低）或自行洗洗睡了～/
结束（下期更精彩哟～～～）
