（一）牛人动效
作者Fabio Ottaviani，编写语言HTML/SCSS/JS
作者Jason Jacobson，编写语言HTML/CSS(SCSS)
作者ari，编写语言HTML(jade)/CSS(SCSS)
作者Fabio Ottaviani，编写语言HTML/CSS(SCSS)
作者Elena Nazarova，编写语言HTML/CSS(SCSS)
作者小编redblue_，编写语言HTML/CSS
（二）动效制作&详解（详解见注释！！！）
总结笔记(动态更新)
//www.greatytc.com/p/7ebd24b67386
HTML
<h1 class='title'>Responsive Web Design</h1>
<div class="container">
<div class='thing'>
<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>
</div>
//为了简短此处按钮省略，有需要的留言。
SCSS
1.设置变量$和@mixin
一个响应式的布局
把一些可以重复用的属性值设置为变量$和@mixin（我个人理解为函数或方法）。
//$colors颜色数组
$colors: (
primary : #1abc9c,
secondary : #DB5461,
bright : #FECA51,
blend : #1AC2CA,
info : #60C7FF,
success : #5cb85c,
alert : #ff9d5d,
danger : #E67373
);
$bg:#333;
$white:#fff;
/*
@media 可以针对不同的屏幕尺寸设置不同的样式，特别是设计响应式的页面，@media 是非常有用的。
screen-between($min-screen-size, $max-screen-size)当窗口尺寸范围，
查询窗口 (最小宽度min-width: $min-screen-size) 和 (最大宽度max-width: ($max-screen-size - 1px))
当我们重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染。
*/
@mixin screen-between($min-screen-size, $max-screen-size) {
@media screen and (min-width: $min-screen-size) and (max-width: ($max-screen-size - 1px)) {
@content;
}
}
@mixin screen-above($screen-size) {
@media screen and (min-width: $screen-size) {
@content;
}
}
//$cols列数，$margin外边距
@mixin flexgrid($cols, $margin) {
$width: (100% / $cols);
$calc-margin: (($margin * $cols) - $margin) / $cols;
display: flex;
//多行多列布局
flex-wrap: wrap;
//lex-wrap: wrap,flex容器为多行,flex子项溢出的部分会被放置到新行，子项内部会发生断行
justify-content: space-between;
//justify-content: space-between容器内各行之间留有空白
> * {
width: calc( #{$width} - #{$calc-margin} );
margin: 0 $margin / 2;
&:nth-child(1) {
margin-left: 0;
}
&:nth-child(#{$cols}n) {
margin-right: 0;
}
&:nth-child(#{$cols}n + 1) {
margin-left: 0;
}
}
}
@mixin screen-between,@mixin screen-above,@mixin flexgrid($cols, $margin),适配屏幕尺寸的算法，
当@include调用screen-between(600px, 800px) 的时候会把阔号中的两个参数(600px, 800px)传回@mixin screen-between中进行计算
2.搭建基本形
.container {
@include screen-between(600px, 800px) {
@include flexgrid(2, 1rem);
}
@include screen-between(800px, 1000px) {
@include flexgrid(3, 1rem);
}
@include screen-above(1000px) {
@include flexgrid(4, 1rem);
}
padding: 0 1rem;
}
body{
min-height: 100vh;
font-family: 'Baloo Tamma';
text-align: center;
text-transform: uppercase;
line-height: 1;
}
.title{
font-family:'Lato', Verdana, "Trebuchet MS", Geneva, sans-serif;
font-size:300%;
font-weight: 700;
padding:2rem 1rem;
color:$bg;
}
.menu-open-button,.menu-open-button1,.menu-open-button2,.menu-open-button3,.menu-open-button4,.menu-open-button5,.menu-open-button6,.menu-open-button7,.menu-open-button8{
background-color: map-get($colors,info);
/*(map-get($colors,info)，用map－get获取$colors组中的颜色，map－get案例详解见笔记总结*/
border-radius: 5% 5% 5% 5%;
width:72px;
height:72px;
justify-content:center;
align-items:center;
position:absolute;
text-align:center;
line-height:80px;
transition-timing-function:cubic-bezier(0.175, 0.885, 0.320, 1.275);
//过度效果的速度曲线值
transition-duration:400ms;
transform:scale(0.8,0.8);
}
.menu-open-button,.menu-open-button1,.menu-open-button2,.menu-open-button3,.menu-open-button4,.menu-open-button5,.menu-open-button6,.menu-open-button7,.menu-open-button8{
&:hover{
transform:scale(1,1);
}
}
.menu-open:checked~{
transition-timing-function:linear;
transition-duration:200ms;
}
.menu-open,.menu-open1,.menu-open2,.menu-open3,.menu-open4,.menu-open5,.menu-open6,.menu-open7,.menu-open8{
display:none;
}
.thing{
color: $white;
font-size: 200%;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
min-height: 150px;
margin-bottom: 1rem;
cursor: pointer;
position: relative;
&:nth-child(1),
&:nth-child(4),
&:nth-child(7) {
background-color: map-get($colors,primary);
}
&:nth-child(2),
&:nth-child(5),
&:nth-child(8) {
background-color: map-get($colors,secondary);
}
&:nth-child(3),
&:nth-child(6),
&:nth-child(9){
background-color: map-get($colors,bright);
}
}
.hamburger{
$width:52px;
$height:6px;
width:$width;
height:$height;
background:white;
display:block;
position:absolute;
top:50%;
left:50%;
margin-left:-$width/2;
margin-top:-$height/2;
transition:transform 300ms;
}
$hamburger-spacing:16px;
$hamburger-rurn:6px;
$hamburger-rurn-b:3px;
$hamburger-rurn-a:11px;
$toggled-size : 0.75;
2.加入动画
最终效果
.hamburger-1{
transform:translate3d(0,-$hamburger-spacing,0);
}
.hamburger-2{
transform:translate3d(0,0,0);
}
.hamburger-3{
transform:translate3d(0,$hamburger-spacing,0);
}
.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都是一样的，为了简短此处省略，有需要的留言。
/*友情提示：如果觉得此文有难度，请看小编之前文章（难度较低）或自行洗洗睡了～*/
> ###结束（下期更精彩哟～～～）