(1) The effect of cattle

The author is Fabio Ottaviani, written in HTML/SCSS/JS

By Jason Jacobson, HTML/CSS(SCSS)

Author Ari, HTML(JADE)/CSS(SCSS)

By Fabio Ottaviani, HTML/CSS(SCSS)

By Elena Nazarova, written in HTML/CSS(SCSS)

Author xiaobian Redblue_, prepare language HTML/CSS

(2) Dynamic effect production & detailed explanation (see notes for detailed explanation!!)

Summary notes (dynamic update) www.jianshu.com/p/7ebd24b67…

HTML

Responsive Web Design

Copy the code
      

       
  
        

    
          
        
      
         
      
         
      
         
    
  
        
// For brevity, this button is omitted.
      

SCSS

1. Set variables $and @mixin

A responsive layout

Set some reusable property values to the variables $and @mixin (which I personally understand as functions or methods).

$colors: (primary: #1abc9c, secondary: #DB5461, bright: #FECA51, blend: #1AC2CA, info: #60C7FF, success : #5cb85c, alert : #ff9d5d, danger : #E67373 ); $bg:#333; $white:#fff; /* @media can be set to different styles for different screen sizes, especially when designing responsive pages. Screen-between ($min-screen-size, $max-screen-size) $min-width: $min-screen-size ($max-screen-size-1px) when we resize the browser, the page will also be rerendered according to the width and height of the browser. */ @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 container is multiple lines,flex child overflow is placed in the new line, child break content: space between; //justify-content: space > * {width: calc(#{$width} - #{$calc}); 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), When @include calls screen-between(600px, 800px), it passes two of the width parameters (600px, 800px) back to @mixin screen-between for calculationCopy the code

2. Build the basics

.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-o pen-button6,.menu-open-button7,.menu-open-button8{ background-color: map-get($colors,info); /*(map-get($colors,info), get the colors in the $colors group with 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; The transition - the timing - function: cubic - the bezier (0.175, 0.885, 0.320, 1.275); Transition-duration :400ms; The 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-o Pen - button6. The menu - open - button7,. The 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;Copy the code

2. Add animations

The final result

.hamburger-1{ transform:translate3d(0,-$hamburger-spacing,0); 2 {}. Mr. Hamburger - transform: translate3d (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); 2 {}. Mr. Hamburger - transform: translate3d (0, 0) scale (0.1, 1); 3 {}. Mr. Hamburger - transform: translate3d (0, 0) rotate 45 deg (-); }} // if you put up the hamburger, you can put up the hamburger.Copy the code

If you feel this article is difficult, please read the previous article (difficulty is low) or wash yourself to sleep ~ /

The end (more exciting next time ~ ~ ~)