#e8e8e8
1.switch { 2 font-size: 17px; 3 position: relative; 4 display: inline-block; 5 width: 70px; 6 height: 34.5px; 7 overflow: hidden; 8} 9 10.switch input { 11 opacity: 0; 12 width: 0; 13 height: 0; 14} 15 16.slider { 17 position: absolute; 18 cursor: pointer; 19 top: 0; 20 left: 0; 21 right: 0; 22 bottom: 0; 23 background-color: #ccc; 24 transition: .4s; 25 border-radius: 30px; 26} 27 28.commutator { 29 cursor: pointer; 30 position: absolute; 31 top: -29%; 32 left: -14%; 33 transition: .4s; 34} 35 36.iron-man { 37 position: absolute; 38 top: -27%; 39 left: -100%; 40 transform: rotate(90deg); 41} 42 43.input:checked + .slider { 44 background-color: #2196F3; 45} 46 47.input:checked + .slider .commutator { 48 transform: translateX(34.5px); 49 opacity: 0; 50} 51 52.input:checked + .slider .iron-man { 53 animation: show_5911 1.3s ease-in-out forwards; 54} 55 56@keyframes show_5911 { 57 0% { 58 transform: translateX(0px) rotate(90deg); 59 } 60 61 50% { 62 transform: translateX(75px) rotate(90deg); 63 } 64 65 100% { 66 transform: translateX(79px) rotate(0deg); 67 } 68}
726 views
726 views
Comments
MIT License