#e8e8e8
1/*------ Settings ------*/ 2.container { 3 --color: #a5a5b0; 4 --size: 30px; 5 display: flex; 6 justify-content: center; 7 align-items: center; 8 position: relative; 9 cursor: pointer; 10 font-size: var(--size); 11 user-select: none; 12 fill: var(--color); 13} 14 15.container .bell-regular { 16 position: absolute; 17 animation: keyframes-fill .5s; 18} 19 20.container .bell-solid { 21 position: absolute; 22 display: none; 23 animation: keyframes-fill .5s; 24} 25 26/* ------ On check event ------ */ 27.container input:checked ~ .bell-regular { 28 display: none; 29} 30 31.container input:checked ~ .bell-solid { 32 display: block; 33} 34 35/* ------ Hide the default checkbox ------ */ 36.container input { 37 position: absolute; 38 opacity: 0; 39 cursor: pointer; 40 height: 0; 41 width: 0; 42} 43 44/* ------ Animation ------ */ 45@keyframes keyframes-fill { 46 0% { 47 opacity: 0; 48 } 49 50 25% { 51 transform: rotate(25deg); 52 } 53 54 50% { 55 transform: rotate(-20deg) scale(1.2); 56 } 57 58 75% { 59 transform: rotate(15deg); 60 } 61}
Comments
2adamgiebl
Pro+
13. August at 20:0913. August at 20:09
Great collection!
catraco 19. August at 0:21
19. August at 0:21
@adamgiebl There is 15 variations and just 10 appear, is this the maximum number?
Variations
10 MIT License