پیشنمایش زنده
کد HTML
<div class="heart-container" title="Like">
<input type="checkbox" class="checkbox" id="like-toggle" />
<div class="svg-container">
<svg
viewBox="0 0 24 24"
class="svg-outline"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"
></path>
</svg>
<svg
viewBox="0 0 24 24"
class="svg-filled"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"
></path>
</svg>
<svg
class="svg-celebrate"
viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg"
>
<circle class="particle" cx="50" cy="10" r="3"></circle>
<circle class="particle" cx="90" cy="30" r="3"></circle>
<circle class="particle" cx="90" cy="70" r="3"></circle>
<circle class="particle" cx="50" cy="90" r="3"></circle>
<circle class="particle" cx="10" cy="70" r="3"></circle>
<circle class="particle" cx="10" cy="30" r="3"></circle>
</svg>
</div>
</div>
کد CSS
.heart-container {
--heart-color: #ff5b89;
--heart-color-hover: #ff3366;
position: relative;
width: 50px;
height: 50px;
cursor: pointer;
}
.heart-container .checkbox {
position: absolute;
inset: 0;
opacity: 0;
z-index: 10;
cursor: pointer;
margin: 0;
}
.heart-container .svg-container {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
pointer-events: none;
}
.heart-container .svg-outline {
position: absolute;
fill: transparent;
stroke: var(--heart-color);
stroke-width: 2;
width: 100%;
height: 100%;
transition:
opacity 0.2s ease,
transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.heart-container .svg-filled {
position: absolute;
fill: var(--heart-color);
opacity: 0;
transform: scale(0.3);
width: 100%;
height: 100%;
transition:
opacity 0.2s ease,
transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.heart-container .svg-celebrate {
position: absolute;
opacity: 0;
width: 100px;
height: 100px;
stroke: var(--heart-color);
fill: var(--heart-color);
stroke-width: 2;
pointer-events: none;
}
.heart-container .svg-celebrate .particle {
opacity: 0;
transform: scale(0);
}
.heart-container:hover .svg-outline {
transform: scale(1.15);
stroke: var(--heart-color-hover);
}
.heart-container .checkbox:checked ~ .svg-container .svg-outline {
opacity: 0;
transform: scale(0.5);
}
.heart-container .checkbox:checked ~ .svg-container .svg-filled {
opacity: 1;
transform: scale(1);
animation: heart-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.heart-container .checkbox:checked ~ .svg-container .svg-celebrate {
animation: celebrate-burst 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275)
forwards;
}
.heart-container .checkbox:checked ~ .svg-container .svg-celebrate .particle {
animation: particle-fly 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
.heart-container
.checkbox:checked
~ .svg-container
.svg-celebrate
.particle:nth-child(1) {
animation-delay: 0s;
}
.heart-container
.checkbox:checked
~ .svg-container
.svg-celebrate
.particle:nth-child(2) {
animation-delay: 0.05s;
}
.heart-container
.checkbox:checked
~ .svg-container
.svg-celebrate
.particle:nth-child(3) {
animation-delay: 0.1s;
}
.heart-container
.checkbox:checked
~ .svg-container
.svg-celebrate
.particle:nth-child(4) {
animation-delay: 0.15s;
}
.heart-container
.checkbox:checked
~ .svg-container
.svg-celebrate
.particle:nth-child(5) {
animation-delay: 0.2s;
}
.heart-container
.checkbox:checked
~ .svg-container
.svg-celebrate
.particle:nth-child(6) {
animation-delay: 0.25s;
}
@keyframes heart-pop {
0% {
transform: scale(0.3);
}
50% {
transform: scale(1.25);
}
100% {
transform: scale(1);
}
}
@keyframes celebrate-burst {
0% {
opacity: 1;
transform: scale(0.4);
}
60% {
opacity: 1;
}
100% {
opacity: 0;
transform: scale(1.8);
}
}
@keyframes particle-fly {
0% {
opacity: 1;
transform: translate(0, 0) scale(1);
}
100% {
opacity: 0;
transform: translate(var(--tx, 0), var(--ty, 0)) scale(0.3);
}
}
.heart-container .svg-celebrate .particle:nth-child(1) {
--tx: -35px;
--ty: -40px;
}
.heart-container .svg-celebrate .particle:nth-child(2) {
--tx: 35px;
--ty: -20px;
}
.heart-container .svg-celebrate .particle:nth-child(3) {
--tx: 35px;
--ty: 20px;
}
.heart-container .svg-celebrate .particle:nth-child(4) {
--tx: -35px;
--ty: 40px;
}
.heart-container .svg-celebrate .particle:nth-child(5) {
--tx: -45px;
--ty: 10px;
}
.heart-container .svg-celebrate .particle:nth-child(6) {
--tx: 45px;
--ty: -10px;
}