5K views
1.label-check { 2 display: none; 3} 4 5.hamburger-label { 6 width: 70px; 7 height: 58px; 8 display: block; 9 cursor: pointer; 10} 11 12.hamburger-label div { 13 width: 70px; 14 height: 6px; 15 background-color: #fff; 16 position: absolute; 17} 18 19.line1 { 20 transition: all .3s; 21} 22 23.line2 { 24 margin: 18px 0 0 0; 25 transition: 0.3s; 26} 27 28.line3 { 29 margin: 36px 0 0 0; 30 transition: 0.3s; 31} 32 33#label-check:checked + .hamburger-label .line1 { 34 transform: rotate(35deg) scaleX(.55) translate(39px, -4.5px); 35 border-radius: 50px 50px 50px 0; 36} 37 38#label-check:checked + .hamburger-label .line3 { 39 transform: rotate(-35deg) scaleX(.55) translate(39px, 4.5px); 40 border-radius: 0 50px 50px 50px; 41} 42 43#label-check:checked + .hamburger-label .line2 { 44 border-top-right-radius: 50px; 45 border-bottom-right-radius: 50px; 46 width: 45px; 47}
JkHuger
JkHuger
MIT License