#e8e8e8
1.burger { 2 position: relative; 3 width: 40px; 4 height: 30px; 5 background: transparent; 6 cursor: pointer; 7 display: block; 8} 9 10.burger input { 11 display: none; 12} 13 14.burger span { 15 display: block; 16 position: absolute; 17 height: 4px; 18 width: 100%; 19 background: black; 20 border-radius: 9px; 21 opacity: 1; 22 left: 0; 23 transform: rotate(0deg); 24 transition: .25s ease-in-out; 25} 26 27.burger span:nth-of-type(1) { 28 top: 0px; 29 transform-origin: left center; 30} 31 32.burger span:nth-of-type(2) { 33 top: 50%; 34 transform: translateY(-50%); 35 transform-origin: left center; 36} 37 38.burger span:nth-of-type(3) { 39 top: 100%; 40 transform-origin: left center; 41 transform: translateY(-100%); 42} 43 44.burger input:checked ~ span:nth-of-type(1) { 45 transform: rotate(45deg); 46 top: 0px; 47 left: 5px; 48} 49 50.burger input:checked ~ span:nth-of-type(2) { 51 width: 0%; 52 opacity: 0; 53} 54 55.burger input:checked ~ span:nth-of-type(3) { 56 transform: rotate(-45deg); 57 top: 28px; 58 left: 5px; 59}
28K views
28K views
Comments
Variations
1 MIT License