#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: .3s; 16} 17 18.bars { 19 width: 100%; 20 height: 4px; 21 background-color: rgb(253, 255, 243); 22 border-radius: 5px; 23 transition-duration: .3s; 24} 25 26/* #checkbox:checked + .toggle .bars { 27 margin-left: 13px; 28} */ 29 30#checkbox:checked + .toggle #bar2 { 31 transform: translateY(14px) rotate(60deg); 32 margin-left: 0; 33 transform-origin: right; 34 transition-duration: .3s; 35 z-index: 2; 36} 37 38#checkbox:checked + .toggle #bar1 { 39 transform: translateY(28px) rotate(-60deg); 40 transition-duration: .3s; 41 transform-origin: left; 42 z-index: 1; 43} 44 45#checkbox:checked + .toggle { 46 transform: rotate(-90deg); 47} 48/* #checkbox:checked + .toggle #bar3 { 49 transform: rotate(90deg); 50 transition-duration: .3s; 51 transform-origin:right; 52} */ 53
6K views
6K views
Comments
MIT License