#e8e8e8
1.switch { 2 font-size: 17px; 3 position: relative; 4 display: inline-block; 5 width: 64px; 6 height: 34px; 7} 8 9.switch input { 10 opacity: 0; 11 width: 0; 12 height: 0; 13} 14 15.slider { 16 position: absolute; 17 cursor: pointer; 18 top: 0; 19 left: 0; 20 right: 0; 21 bottom: 0; 22 background-color: #73C0FC; 23 transition: .4s; 24 border-radius: 30px; 25} 26 27.slider:before { 28 position: absolute; 29 content: ""; 30 height: 30px; 31 width: 30px; 32 border-radius: 20px; 33 left: 2px; 34 bottom: 2px; 35 z-index: 2; 36 background-color: #e8e8e8; 37 transition: .4s; 38} 39 40.sun svg { 41 position: absolute; 42 top: 6px; 43 left: 36px; 44 z-index: 1; 45 width: 24px; 46 height: 24px; 47} 48 49.moon svg { 50 fill: #73C0FC; 51 position: absolute; 52 top: 5px; 53 left: 5px; 54 z-index: 1; 55 width: 24px; 56 height: 24px; 57} 58 59/* .switch:hover */.sun svg { 60 animation: rotate 15s linear infinite; 61} 62 63@keyframes rotate { 64 65 0% { 66 transform: rotate(0); 67 } 68 69 100% { 70 transform: rotate(360deg); 71 } 72} 73 74/* .switch:hover */.moon svg { 75 animation: tilt 5s linear infinite; 76} 77 78@keyframes tilt { 79 80 0% { 81 transform: rotate(0deg); 82 } 83 84 25% { 85 transform: rotate(-10deg); 86 } 87 88 75% { 89 transform: rotate(10deg); 90 } 91 92 100% { 93 transform: rotate(0deg); 94 } 95} 96 97.input:checked + .slider { 98 background-color: #183153; 99} 100 101.input:focus + .slider { 102 box-shadow: 0 0 1px #183153; 103} 104 105.input:checked + .slider:before { 106 transform: translateX(30px); 107}
Comments
MIT License