2.3K views
1.con-like { 2 --red: rgb(255, 50, 100); 3 position: relative; 4 width: 50px; 5 height: 50px; 6} 7 8.con-like .like { 9 position: absolute; 10 width: 100%; 11 height: 100%; 12 opacity: 0; 13 z-index: 20; 14 cursor: pointer; 15} 16 17.con-like .checkmark { 18 width: 100%; 19 height: 100%; 20 display: flex; 21 justify-content: center; 22 align-items: center; 23} 24 25.con-like .outline, 26.con-like .filled { 27 fill: var(--red); 28 position: absolute; 29} 30 31.con-like .filled { 32 animation: kfr-filled 0.5s; 33 display: none; 34} 35 36.con-like .celebrate { 37 position: absolute; 38 animation: kfr-celebrate 0.5s; 39 animation-fill-mode: forwards; 40 display: none; 41} 42 43.con-like .poly { 44 stroke: var(--red); 45 fill: var(--red); 46} 47 48.con-like .like:checked ~ .checkmark .filled { 49 display: block 50} 51 52.con-like .like:checked ~ .checkmark .celebrate { 53 display: block 54} 55 56@keyframes kfr-filled { 57 0% { 58 opacity: 0; 59 transform: scale(0); 60 } 61 62 50% { 63 opacity: 1; 64 transform: scale(1.2); 65 } 66} 67 68@keyframes kfr-celebrate { 69 0% { 70 transform: scale(0); 71 } 72 73 50% { 74 opacity: 0.8; 75 } 76 77 100% { 78 transform: scale(1.2); 79 opacity: 0; 80 display: none; 81 } 82}
MIT License