#212121
1.switch { 2 position: relative; 3 width: 130px; 4 height: 50px; 5 margin: 0px; 6 appearance: none; 7 -webkit-appearance: none; 8 background-color: rgb(4,52,73); 9 background-size: cover; 10 background-repeat: no-repeat; 11 border-radius: 25px; 12 transition: background-image .7s ease-in-out; 13 outline: none; 14 cursor: pointer; 15 overflow: hidden; 16} 17 18.switch:checked { 19 background-color: rgb(0, 195, 255); 20 background-size: cover; 21 transition: background-image 1s ease-in-out; 22} 23 24.switch:after { 25 content: ''; 26 width: 46px; 27 height: 46px; 28 border-radius: 50%; 29 background-color: #fff; 30 position: absolute; 31 left: 2px; 32 top: 2px; 33 transform: translateX(0px); 34 animation: off .7s forwards cubic-bezier(.8, .5, .2, 1.4); 35 box-shadow: inset 5px -5px 4px rgba(53, 53, 53, 0.3); 36} 37 38@keyframes off { 39 0% { 40 transform: translateX(80px); 41 width: 46px; 42 } 43 44 50% { 45 width: 75px; 46 border-radius: 25px; 47 } 48 49 100% { 50 transform: translateX(0px); 51 width: 46px; 52 } 53} 54 55.switch:checked:after { 56 animation: on .7s forwards cubic-bezier(.8, .5, .2, 1.4); 57 box-shadow: inset -5px -5px 4px rgba(53, 53, 53, 0.3); 58} 59 60@keyframes on { 61 0% { 62 transform: translateX(0px); 63 width: 46px; 64 } 65 66 50% { 67 width: 75px; 68 border-radius: 25px; 69 } 70 71 100% { 72 transform: translateX(80px); 73 width: 46px; 74 } 75} 76 77.switch:checked:before { 78 content: ''; 79 width: 15px; 80 height: 15px; 81 border-radius: 50%; 82 position: absolute; 83 left: 15px; 84 top: 5px; 85 transform-origin: 53px 10px; 86 background-color: transparent; 87 box-shadow: 5px -1px 0px #fff; 88 filter: blur(0px); 89 animation: sun .7s forwards ease; 90} 91 92@keyframes sun { 93 0% { 94 transform: rotate(170deg); 95 background-color: transparent; 96 box-shadow: 5px -1px 0px #fff; 97 filter: blur(0px); 98 } 99 100 50% { 101 background-color: transparent; 102 box-shadow: 5px -1px 0px #fff; 103 filter: blur(0px); 104 } 105 106 90% { 107 background-color: #f5daaa; 108 box-shadow: 0px 0px 10px #f5deb4, 109 0px 0px 20px #f5deb4, 110 0px 0px 30px #f5deb4, 111 inset 0px 0px 2px #efd3a3; 112 filter: blur(1px); 113 } 114 115 100% { 116 transform: rotate(0deg); 117 background-color: #f5daaa; 118 box-shadow: 0px 0px 10px #f5deb4, 119 0px 0px 20px #f5deb4, 120 0px 0px 30px #f5deb4, 121 inset 0px 0px 2px #efd3a3; 122 filter: blur(1px); 123 } 124} 125 126.switch:before { 127 content: ''; 128 width: 15px; 129 height: 15px; 130 border-radius: 50%; 131 position: absolute; 132 left: 15px; 133 top: 5px; 134 filter: blur(1px); 135 background-color: #f5daaa; 136 box-shadow: 0px 0px 10px #f5deb4, 1370px 0px 20px #f5deb4, 1380px 0px 30px #f5deb4, 139 inset 0px 0px 2px #efd3a3; 140 transform-origin: 53px 10px; 141 animation: moon .7s forwards ease; 142} 143 144@keyframes moon { 145 0% { 146 transform: rotate(0deg); 147 filter: blur(1px); 148 } 149 150 50% { 151 filter: blur(1px); 152 } 153 154 90% { 155 background-color: transparent; 156 box-shadow: 5px -1px 0px #fff; 157 filter: blur(0px); 158 } 159 160 100% { 161 transform: rotate(170deg); 162 background-color: transparent; 163 box-shadow: 5px -1px 0px #fff; 164 filter: blur(0px); 165 } 166} 167
Comments
MIT License