Checkbox by catraco
#212121
1/* Hide the default checkbox */ 2.container input { 3 position: absolute; 4 opacity: 0; 5 cursor: pointer; 6 height: 0; 7 width: 0; 8} 9 10.container { 11 display: flex; 12 justify-content: center; 13 align-items: center; 14 position: relative; 15 cursor: pointer; 16 user-select: none; 17} 18 19.container input:checked ~ .like { 20 animation: kfs-fill-like .5s forwards; 21} 22 23.container .like { 24 fill: none; 25 stroke: white; 26} 27 28.container input:checked ~ .celebrate { 29 display: block; 30} 31 32.container .celebrate { 33 position: absolute; 34 animation: kfs-celebrate 1s; 35 animation-fill-mode: forwards; 36 display: none; 37 stroke: white; 38} 39 40@keyframes kfs-celebrate { 41 0% { 42 transform: scale(0); 43 opacity: 0; 44 } 45 46 50% { 47 opacity: 1; 48 } 49 50 100% { 51 transform: scale(1.5) rotate(180deg); 52 opacity: 0; 53 display: none; 54 } 55} 56 57@keyframes kfs-fill-like { 58 59 50% { 60 fill: white; 61 stroke: white; 62 transform: scale(1.2); 63 } 64 65 100% { 66 fill: white; 67 stroke: white; 68 } 69}
796 views
796 views
MIT License