358 views
CSSAdd prefixes
1.hamburger { 2 cursor: pointer; 3} 4 5.hamburger input { 6 display: none; 7} 8 9.hamburger svg { 10 /* The size of the SVG defines the overall size */ 11 height: 3em; 12 /* Define the transition for transforming the SVG */ 13 transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1); 14} 15 16.line { 17 fill: none; 18 stroke: white; 19 stroke-linecap: round; 20 stroke-linejoin: round; 21 stroke-width: 3; 22 /* Define the transition for transforming the Stroke */ 23 transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1), 24 stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1); 25} 26 27.line-top-bottom { 28 stroke-dasharray: 12 63; 29} 30 31.hamburger input:checked + svg { 32 transform: rotate(-45deg); 33} 34 35.hamburger input:checked + svg .line-top-bottom { 36 stroke-dasharray: 20 300; 37 stroke-dashoffset: -32.42; 38} 39
HTML
1<label class="hamburger"> 2 <input type="checkbox"> 3 <svg viewBox="0 0 32 32"> 4 <path class="line line-top-bottom" d="M27 10 13 10C10.8 10 9 8.2 9 6 9 3.5 10.8 2 13 2 15.2 2 17 3.8 17 6L17 26C17 28.2 18.8 30 21 30 23.2 30 25 28.2 25 26 25 23.8 23.2 22 21 22L7 22"></path> 5 <path class="line" d="M7 16 27 16"></path> 6 </svg> 7</label>