3.2K views
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
MIT License