Switch by Shoh2008
#212121
1.checkbox-wrapper-11 { 2 --text: #414856; 3 --check: #4F29F0; 4 --disabled: #C3C8DE; 5 --border-radius: 10px; 6 border-radius: var(--border-radius); 7 position: relative; 8 padding: 5px; 9 display: grid; 10 grid-template-columns: 30px auto; 11 align-items: center; 12} 13 14.checkbox-wrapper-11 label { 15 color: var(--text); 16 position: relative; 17 cursor: pointer; 18 display: grid; 19 align-items: center; 20 width: -webkit-fit-content; 21 width: -moz-fit-content; 22 width: fit-content; 23 transition: color 0.3s ease; 24} 25 26.checkbox-wrapper-11 label::before, 27 .checkbox-wrapper-11 label::after { 28 content: ""; 29 position: absolute; 30} 31 32.checkbox-wrapper-11 label::before { 33 height: 2px; 34 width: 8px; 35 left: -27px; 36 background: var(--check); 37 border-radius: 2px; 38 transition: background 0.3s ease; 39} 40 41.checkbox-wrapper-11 label:after { 42 height: 4px; 43 width: 4px; 44 top: 8px; 45 left: -25px; 46 border-radius: 50%; 47} 48 49.checkbox-wrapper-11 input[type=checkbox] { 50 -webkit-appearance: none; 51 -moz-appearance: none; 52 position: relative; 53 height: 15px; 54 width: 15px; 55 outline: none; 56 border: 0; 57 margin: 0 15px 0 0; 58 cursor: pointer; 59 background: var(--background); 60 display: grid; 61 align-items: center; 62} 63 64.checkbox-wrapper-11 input[type=checkbox]::before, .checkbox-wrapper-11 input[type=checkbox]::after { 65 content: ""; 66 position: absolute; 67 height: 2px; 68 top: auto; 69 background: var(--check); 70 border-radius: 2px; 71} 72 73.checkbox-wrapper-11 input[type=checkbox]::before { 74 width: 0px; 75 right: 60%; 76 transform-origin: right bottom; 77} 78 79.checkbox-wrapper-11 input[type=checkbox]::after { 80 width: 0px; 81 left: 40%; 82 transform-origin: left bottom; 83} 84 85.checkbox-wrapper-11 input[type=checkbox]:checked::before { 86 -webkit-animation: check-01-11 0.4s ease forwards; 87 animation: check-01-11 0.4s ease forwards; 88} 89 90.checkbox-wrapper-11 input[type=checkbox]:checked::after { 91 -webkit-animation: check-02-11 0.4s ease forwards; 92 animation: check-02-11 0.4s ease forwards; 93} 94 95.checkbox-wrapper-11 input[type=checkbox]:checked + label { 96 color: var(--disabled); 97 -webkit-animation: move-11 0.3s ease 0.1s forwards; 98 animation: move-11 0.3s ease 0.1s forwards; 99} 100 101.checkbox-wrapper-11 input[type=checkbox]:checked + label::before { 102 background: var(--disabled); 103 -webkit-animation: slice-11 0.4s ease forwards; 104 animation: slice-11 0.4s ease forwards; 105} 106 107.checkbox-wrapper-11 input[type=checkbox]:checked + label::after { 108 -webkit-animation: firework-11 0.5s ease forwards 0.1s; 109 animation: firework-11 0.5s ease forwards 0.1s; 110} 111 112@-webkit-keyframes move-11 { 113 50% { 114 padding-left: 8px; 115 padding-right: 0px; 116 } 117 118 100% { 119 padding-right: 4px; 120 } 121} 122 123@keyframes move-11 { 124 50% { 125 padding-left: 8px; 126 padding-right: 0px; 127 } 128 129 100% { 130 padding-right: 4px; 131 } 132} 133 134@-webkit-keyframes slice-11 { 135 60% { 136 width: 100%; 137 left: 4px; 138 } 139 140 100% { 141 width: 100%; 142 left: -2px; 143 padding-left: 0; 144 } 145} 146 147@keyframes slice-11 { 148 60% { 149 width: 100%; 150 left: 4px; 151 } 152 153 100% { 154 width: 100%; 155 left: -2px; 156 padding-left: 0; 157 } 158} 159 160@-webkit-keyframes check-01-11 { 161 0% { 162 width: 4px; 163 top: auto; 164 transform: rotate(0); 165 } 166 167 50% { 168 width: 0px; 169 top: auto; 170 transform: rotate(0); 171 } 172 173 51% { 174 width: 0px; 175 top: 8px; 176 transform: rotate(45deg); 177 } 178 179 100% { 180 width: 5px; 181 top: 8px; 182 transform: rotate(45deg); 183 } 184} 185 186@keyframes check-01-11 { 187 0% { 188 width: 4px; 189 top: auto; 190 transform: rotate(0); 191 } 192 193 50% { 194 width: 0px; 195 top: auto; 196 transform: rotate(0); 197 } 198 199 51% { 200 width: 0px; 201 top: 8px; 202 transform: rotate(45deg); 203 } 204 205 100% { 206 width: 5px; 207 top: 8px; 208 transform: rotate(45deg); 209 } 210} 211 212@-webkit-keyframes check-02-11 { 213 0% { 214 width: 4px; 215 top: auto; 216 transform: rotate(0); 217 } 218 219 50% { 220 width: 0px; 221 top: auto; 222 transform: rotate(0); 223 } 224 225 51% { 226 width: 0px; 227 top: 8px; 228 transform: rotate(-45deg); 229 } 230 231 100% { 232 width: 10px; 233 top: 8px; 234 transform: rotate(-45deg); 235 } 236} 237 238@keyframes check-02-11 { 239 0% { 240 width: 4px; 241 top: auto; 242 transform: rotate(0); 243 } 244 245 50% { 246 width: 0px; 247 top: auto; 248 transform: rotate(0); 249 } 250 251 51% { 252 width: 0px; 253 top: 8px; 254 transform: rotate(-45deg); 255 } 256 257 100% { 258 width: 10px; 259 top: 8px; 260 transform: rotate(-45deg); 261 } 262} 263 264@-webkit-keyframes firework-11 { 265 0% { 266 opacity: 1; 267 box-shadow: 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0; 268 } 269 270 30% { 271 opacity: 1; 272 } 273 274 100% { 275 opacity: 0; 276 box-shadow: 0 -15px 0 0px #4F29F0, 14px -8px 0 0px #4F29F0, 14px 8px 0 0px #4F29F0, 0 15px 0 0px #4F29F0, -14px 8px 0 0px #4F29F0, -14px -8px 0 0px #4F29F0; 277 } 278} 279 280@keyframes firework-11 { 281 0% { 282 opacity: 1; 283 box-shadow: 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0; 284 } 285 286 30% { 287 opacity: 1; 288 } 289 290 100% { 291 opacity: 0; 292 box-shadow: 0 -15px 0 0px #4F29F0, 14px -8px 0 0px #4F29F0, 14px 8px 0 0px #4F29F0, 0 15px 0 0px #4F29F0, -14px 8px 0 0px #4F29F0, -14px -8px 0 0px #4F29F0; 293 } 294}
1.2K views
1.2K views
MIT License