#212121
1#checkbox { 2 display: none; 3} 4 5.toggle { 6 position: relative; 7 width: 40px; 8 height: 40px; 9 cursor: pointer; 10 display: flex; 11 flex-direction: column; 12 align-items: center; 13 justify-content: center; 14 gap: 10px; 15 transition-duration: .5s; 16} 17 18.bars { 19 width: 100%; 20 height: 4px; 21 background-color: rgb(176, 92, 255); 22 border-radius: 4px; 23} 24 25#bar2 { 26 transition-duration: .8s; 27} 28 29#bar1,#bar3 { 30 width: 70%; 31} 32 33#checkbox:checked + .toggle .bars { 34 position: absolute; 35 transition-duration: .5s; 36} 37 38#checkbox:checked + .toggle #bar2 { 39 transform: scaleX(0); 40 transition-duration: .5s; 41} 42 43#checkbox:checked + .toggle #bar1 { 44 width: 100%; 45 transform: rotate(45deg); 46 transition-duration: .5s; 47} 48 49#checkbox:checked + .toggle #bar3 { 50 width: 100%; 51 transform: rotate(-45deg); 52 transition-duration: .5s; 53} 54 55#checkbox:checked + .toggle { 56 transition-duration: .5s; 57 transform: rotate(180deg); 58}
Comments
Variations
3 MIT License