（一）牛人動(dòng)效
作者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
（二）動(dòng)效制作&詳解（詳解見注釋３邓臁！Ｋ钩健）
總結(jié)筆記(動(dòng)態(tài)更新)
http://www.reibang.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>
//為了簡(jiǎn)短此處按鈕省略舶担，有需要的留言。
SCSS
1.設(shè)置變量$和@mixin
一個(gè)響應(yīng)式的布局
把一些可以重復(fù)用的屬性值設(shè)置為變量$和@mixin（我個(gè)人理解為函數(shù)或方法）彬呻。
//$colors顏色數(shù)組
$colors: (
primary : #1abc9c,
secondary : #DB5461,
bright : #FECA51,
blend : #1AC2CA,
info : #60C7FF,
success : #5cb85c,
alert : #ff9d5d,
danger : #E67373
);
$bg:#333;
$white:#fff;
/*
@media 可以針對(duì)不同的屏幕尺寸設(shè)置不同的樣式衣陶，特別是設(shè)計(jì)響應(yīng)式的頁面，@media 是非常有用的闸氮。
screen-between($min-screen-size, $max-screen-size)當(dāng)窗口尺寸范圍剪况，
查詢窗口 (最小寬度min-width: $min-screen-size) 和 (最大寬度max-width: ($max-screen-size - 1px))
當(dāng)我們重置瀏覽器大小的過程中，頁面也會(huì)根據(jù)瀏覽器的寬度和高度重新渲染蒲跨。
*/
@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列數(shù)译断，$margin外邊距
@mixin flexgrid($cols, $margin) {
$width: (100% / $cols);
$calc-margin: (($margin * $cols) - $margin) / $cols;
display: flex;
//多行多列布局
flex-wrap: wrap;
//lex-wrap: wrap,flex容器為多行,flex子項(xiàng)溢出的部分會(huì)被放置到新行，子項(xiàng)內(nèi)部會(huì)發(fā)生斷行
justify-content: space-between;
//justify-content: space-between容器內(nèi)各行之間留有空白
> * {
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),適配屏幕尺寸的算法或悲，
當(dāng)@include調(diào)用screen-between(600px, 800px) 的時(shí)候會(huì)把闊號(hào)中的兩個(gè)參數(shù)(600px, 800px)傳回@mixin screen-between中進(jìn)行計(jì)算
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案例詳解見筆記總結(jié)*/
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.加入動(dòng)畫
最終效果
.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都是一樣的巡语，為了簡(jiǎn)短此處省略翎蹈，有需要的留言。
/*友情提示：如果覺得此文有難度男公，請(qǐng)看小編之前文章（難度較低）或自行洗洗睡了～*/
> ###結(jié)束（下期更精彩喲～～～）