Пример:
HTML:
1 2 3 |
<label class="cb-label"> <input class="cb pristine" type="checkbox" /> <span>Флажок checkbox</span> </label> |
CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 |
.cb-label { display: block; font-size: 20px; margin: 1em 0; -webkit-tap-highlight-color: transparent; } .cb { box-shadow: 0 0 0 0.125em rgba(0, 0, 0, 0.75) inset; display: inline-block; position: relative; width: 1.5em; height: 1.5em; font-size: 22px; vertical-align: middle; -moz-appearance: none; -webkit-appearance: none; } .cb:before, .cb:after { content: ""; display: block; position: absolute; animation: none; } .cb:before { animation: eraseA 0.5s steps(1) forwards; background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABICAMAAABx5AOBAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAACcUExURUdwTDMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMwzZNNQAAAAzdFJOUwD9CPf680HnDN0SLGUFwjrjnCK9s4agTAKAbEfXJ+weXBccyTV0z6eWj6TxeVdU0dKqUj+hA9AAAAIXSURBVBgZncAFduNAEATQEoItsszMGN66/9021GMpeXbU+mjGf8td0kkzNJKMHX7J52jA7tC4QM++8CqAmn1hiQut5MQyC1p9ViygFFusGEDHf2DFbAmVImLFrA0Vu8eKbgGdMcu8cQidqcOSaAqlzYwlhzaURheWbAtoxRavXgpozQNeRW1oJT1eLTKoTXjlPENtHtCw9lBLerzqjKAWWzTSFtSKgEbQhtroSMN9ht6TRaMPvXVEoxtC70Qjn0PPdyjcFfTCLY0TGnikcWhBr72g8HzoJT0aYzSwsijSEHrriOJhhwbONB7RQOZRpCFu2/iT82DQHyaosrsUXobbJjk/WUNUTWiMcdvQ47cOKpY5xaGF27oUUQtlHQp3ijv2Dr9ZQ5T4LkUH96xfKTq4CrcU+QZ3nSmiFow9jRj3+Ra/Wf8gioCia+O+8JXiCDGg8DL8pU8RLPFl6lKc8aedQxHjU7iliNb4U5JSpAk+7GnEqGFC4ezwrggoujZqmC8o+ng3oHB81DHqUcxCYOpSDFDPisIaItxSLOaoZxNQDLCnMUZdR4rIDyhmLdT1ROEGNFaobZ3zt9RGfUf+4k6h8MRf3kZQWAb8wdtBY9TjDyfoTFgVFFAZtR1WjKEUHlgWraHVYVkMtZglXRtqmUXDy6BXPNDoo4HWC0Uaooks4JegjWb8nB+8IZpq9xwyGqK58NGb7aDyH2UTzeCLYT1BAAAAAElFTkSuQmCC') 0 100%/1.2em 1.35em no-repeat; bottom: 0.2em; left: 0.3em; width: 0; height: 1.35em; } .cb:after { animation: eraseB 0.5s linear forwards; background: linear-gradient(rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 50%) 11.2em 0, linear-gradient(#c8646e, #c8646e) 11.2em 0, linear-gradient(90deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6) 0.1em, rgba(255, 255, 255, 0) 0.1em, rgba(255, 255, 255, 0) 0.2em, rgba(0, 0, 0, 0.2) 0.2em, rgba(0, 0, 0, 0.2) 0.3em, rgba(0, 0, 0, 0) 0.3em) 9.8em 0/0.3em 100%, repeating-linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6) 0.1em, rgba(255, 255, 255, 0) 0.1em, rgba(255, 255, 255, 0) 0.2em) 10.2em 0/0.5em 100%, linear-gradient(90deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6) 0.1em, rgba(255, 255, 255, 0) 0.1em, rgba(255, 255, 255, 0) 0.2em, rgba(0, 0, 0, 0.2) 0.2em, rgba(0, 0, 0, 0.2) 0.3em, rgba(0, 0, 0, 0) 0.3em) 10.8em 0/0.3em 100%, linear-gradient(rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 0.6) 35%, rgba(255, 255, 255, 0.6) 65%, rgba(255, 255, 255, 0) 65%) 9.7em 0, linear-gradient(#b4b4b4, #b4b4b4) 9.7em 0, linear-gradient(rgba(0, 0, 0, 0.1) 27%, rgba(0, 0, 0, 0) 27%, rgba(0, 0, 0, 0) 73%, rgba(0, 0, 0, 0.2) 73%) 2em 0, linear-gradient(#f0d000, #f0d000) 2em 0, linear-gradient(-14deg, #1e1e1e 18%, rgba(30, 30, 30, 0) 20%) 0 0/0.5em 0.5em, linear-gradient(14deg, rgba(30, 30, 30, 0) 80%, #1e1e1e 83%) 0 0.5em/0.5em 0.5em, linear-gradient(-14deg, #d2a078 48%, rgba(210, 160, 120, 0) 50%) 0 0/2em 0.5em, linear-gradient(14deg, rgba(0, 0, 0, 0) 48%, rgba(0, 0, 0, 0.1) 50%) 0 0.5em/2em 0.5em, linear-gradient(14deg, rgba(210, 160, 120, 0) 48%, #d2a078 50%) 0 0.5em/2em 0.5em; background-repeat: no-repeat; border-radius: 0 0.1em 0.1em 0; opacity: 0; visibility: hidden; transform-origin: 0 0.25em; width: 12em; height: 1em; } .cb:checked { background-color: transparent; } .cb:checked:before { animation: drawA 0.5s linear forwards; } .cb:checked:after { animation: drawB 0.5s linear; } .cb:focus { outline: transparent; } .cb:focus + span { color: rgba(0, 0, 0, 0.75); outline: transparent; } .pristine:before, .pristine:after { animation: none; } @keyframes drawA { from, 5% { width: 0; height: 1.35em; } 90%, to { width: 1.2em; height: 1.35em; } } @keyframes drawB { from { opacity: 0; transform: translate(0em, -0.5em) rotate(-50deg); visibility: visible; } 5% { opacity: 1; transform: translate(0em, 0.3em) rotate(-60deg); } 17% { transform: translate(0.25em, 0.8em) rotate(-65deg); } 79% { transform: translate(1.1em, -0.14em) rotate(-63deg); } 90% { opacity: 1; transform: translate(1.2em, -0.15em) rotate(-63deg); } to { opacity: 0; transform: translate(1.25em, -1.7em) rotate(-63deg); } } @keyframes eraseA { from { width: 1.2em; height: 1.35em; } 10% { width: 1.2em; height: 1.08em; } 27% { width: 1.2em; height: 0.81em; } 36% { width: 1.2em; height: 0.7em; } 45% { width: 1.2em; height: 0.55em; } 55% { width: 1.2em; height: 0.35em; } 80%, to { width: 1.2em; height: 0; } } @keyframes eraseB { from { opacity: 0; transform: translate(0.6em, -12.2em) rotate(90deg); visibility: visible; } 10% { opacity: 1; transform: translate(1.2em, -12.05em) rotate(90deg); } 20% { transform: translate(0.6em, -11.9em) rotate(90deg); } 30% { transform: translate(1.2em, -11.75em) rotate(90deg); } 40% { transform: translate(0.6em, -11.6em) rotate(90deg); } 50% { transform: translate(1.2em, -11.45em) rotate(90deg); } 60% { transform: translate(0.6em, -11.3em) rotate(90deg); } 70% { transform: translate(1.2em, -11.15em) rotate(90deg); } 80% { transform: translate(0.6em, -11em) rotate(90deg); } 90% { opacity: 1; transform: translate(2em, -12.5em) rotate(100deg); } to { opacity: 0; transform: translate(2em, -12.5em) rotate(100deg); } } |
Найдено на codepen.io у пользователя Jon Kantner
Добавить комментарий: