@charset "utf-8";body {padding: 40px;}.heart {font-size: 40px;color: #c2b5b5;user-select: none;}.like {cursor: pointer;display: flex;justify-content: center;align-items: center;background: pink;}.like [type="checkbox"] {display: none;}.like [type="checkbox"]:checked ~ .heart {animation: heart 0.6s forwards;}@keyframes heart {0% {transform: scale(0);}50% {transform: scale(1.5);}100% {transform: scale(1);color: red;}}.ripple {width: 85px;height: 85px;background: red;border-radius: 50%;transform: scale(0);}.like [type="checkbox"]:checked ~ .ripple {animation: ripple 0.6s forwards;}@keyframes ripple {0% {transform: scale(0);}50% {transform: scale(1.5);}100% {transform: scale(1);opacity: 0;}}