@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;
}
}
 
הההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההה
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX