Switch by vk-uiux
#e8e8e8
1#checkbox { 2 display: none; 3} 4 5.toggle { 6 position: relative; 7 width: 40px; 8 cursor: pointer; 9 margin: auto; 10 display: block; 11 height: calc(4px * 3 + 11px * 2); 12} 13 14.bar { 15 position: absolute; 16 left: 0; 17 right: 0; 18 height: 4px; 19 border-radius: calc(4px / 2); 20 background: #7b52b9; 21 color: inherit; 22 opacity: 1; 23 transition: none 0.35s cubic-bezier(.5,-0.35,.35,1.5) 0s; 24} 25 26/***** Tornado Animation *****/ 27 28.bar--top { 29 bottom: calc(50% + 11px + 4px/ 2); 30 transition-property: bottom,transform; 31 transition-delay: calc(0s + 0.35s) * .6; 32} 33 34.bar--middle { 35 top: calc(50% - 4px/ 2); 36 transition-property: opacity,transform; 37 transition-delay: calc(0s + 0.35s * .3); 38} 39 40.bar--bottom { 41 top: calc(50% + 11px + 4px/ 2); 42 transition-property: top,transform; 43 transition-delay: 0s; 44} 45 46#checkbox:checked + .toggle .bar--top { 47 transform: rotate(-135deg); 48 transition-delay: 0s; 49 bottom: calc(50% - 4px/ 2); 50} 51 52#checkbox:checked + .toggle .bar--middle { 53 opacity: 0; 54 transform: rotate(-135deg); 55 transition-delay: calc(0s + 0.35s * .3); 56} 57 58#checkbox:checked + .toggle .bar--bottom { 59 top: calc(50% - 4px/ 2); 60 transform: rotate(-225deg); 61 transition-delay: calc(0s + 0.35s * .6); 62}
2.3K views
2.3K views
MIT License