Checkbox by della11
#212121
1#checklist { 2 --background: #303952; 3 --text: #5d6474; 4 --check: #cc29f0; 5 --disabled: #d3c8de; 6 --width: 100px; 7 --height: 180px; 8 --border-radius: 10px; 9 background: var(--background); 10 width: var(--width); 11 height: var(--height); 12 border-radius: var(--border-radius); 13 position: relative; 14 box-shadow: 0 10px 30px rgba(65, 72, 86, 0.05); 15 padding: 30px 85px; 16 display: grid; 17 grid-template-columns: 30px auto; 18 align-items: center; 19 justify-content: center; 20} 21 22#checklist label { 23 color: var(--text); 24 position: relative; 25 cursor: pointer; 26 display: grid; 27 align-items: center; 28 width: fit-content; 29 transition: color 0.3s ease; 30 margin-right: 20px; 31} 32 33#checklist label::before, 34#checklist label::after { 35 content: ""; 36 position: absolute; 37} 38 39#checklist label::before { 40 height: 2px; 41 width: 8px; 42 left: -27px; 43 background: var(--check); 44 border-radius: 2px; 45 transition: background 0.3s ease; 46} 47 48#checklist label:after { 49 height: 4px; 50 width: 4px; 51 top: 8px; 52 left: -25px; 53 border-radius: 50%; 54} 55 56#checklist input[type="checkbox"] { 57 -webkit-appearance: none; 58 -moz-appearance: none; 59 position: relative; 60 height: 15px; 61 width: 15px; 62 outline: none; 63 border: 0; 64 margin: 0 15px 0 0; 65 cursor: pointer; 66 background: var(--background); 67 display: grid; 68 align-items: center; 69 margin-right: 20px; 70} 71 72#checklist input[type="checkbox"]::before, 73#checklist input[type="checkbox"]::after { 74 content: ""; 75 position: absolute; 76 height: 2px; 77 top: auto; 78 background: var(--check); 79 border-radius: 2px; 80} 81 82#checklist input[type="checkbox"]::before { 83 width: 0px; 84 right: 60%; 85 transform-origin: right bottom; 86} 87 88#checklist input[type="checkbox"]::after { 89 width: 0px; 90 left: 40%; 91 transform-origin: left bottom; 92} 93 94#checklist input[type="checkbox"]:checked::before { 95 animation: check-01 0.4s ease forwards; 96} 97 98#checklist input[type="checkbox"]:checked::after { 99 animation: check-02 0.4s ease forwards; 100} 101 102#checklist input[type="checkbox"]:checked + label { 103 color: var(--disabled); 104 animation: move 0.3s ease 0.1s forwards; 105} 106 107#checklist input[type="checkbox"]:checked + label::before { 108 background: var(--disabled); 109 animation: slice 0.4s ease forwards; 110} 111 112#checklist input[type="checkbox"]:checked + label::after { 113 animation: firework 0.5s ease forwards 0.1s; 114} 115 116@keyframes move { 117 50% { 118 padding-left: 8px; 119 padding-right: 0px; 120 } 121 122 100% { 123 padding-right: 4px; 124 } 125} 126 127@keyframes slice { 128 60% { 129 width: 100%; 130 left: 4px; 131 } 132 133 100% { 134 width: 100%; 135 left: -2px; 136 padding-left: 0; 137 } 138} 139 140@keyframes check-01 { 141 0% { 142 width: 4px; 143 top: auto; 144 transform: rotate(0); 145 } 146 147 50% { 148 width: 0px; 149 top: auto; 150 transform: rotate(0); 151 } 152 153 51% { 154 width: 0px; 155 top: 8px; 156 transform: rotate(45deg); 157 } 158 159 100% { 160 width: 5px; 161 top: 8px; 162 transform: rotate(45deg); 163 } 164} 165 166@keyframes check-02 { 167 0% { 168 width: 4px; 169 top: auto; 170 transform: rotate(0); 171 } 172 173 50% { 174 width: 0px; 175 top: auto; 176 transform: rotate(0); 177 } 178 179 51% { 180 width: 0px; 181 top: 8px; 182 transform: rotate(-45deg); 183 } 184 185 100% { 186 width: 10px; 187 top: 8px; 188 transform: rotate(-45deg); 189 } 190} 191 192@keyframes firework { 193 0% { 194 opacity: 1; 195 box-shadow: 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0, 196 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0; 197 } 198 199 30% { 200 opacity: 1; 201 } 202 203 100% { 204 opacity: 0; 205 box-shadow: 0 -15px 0 0px #4f29f0, 14px -8px 0 0px #4f29f0, 206 14px 8px 0 0px #4f29f0, 0 15px 0 0px #4f29f0, -14px 8px 0 0px #4f29f0, 207 -14px -8px 0 0px #4f29f0; 208 } 209} 210
903 views
Variation of acheckbox
MIT License