今天，我們來學(xué)習(xí)一個很有趣的CSS效果——點贊飄心效果！

.heart {
position: absolute;
animation: like 1s ease;
}
@keyframes like {
0% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(3);
opacity: 0;
}
}
.like-btn {
background-image: url("like.png");
width: 50px;
height: 50px;
background-size: cover;
cursor: pointer;
display: inline-block;
position: relative;
}
.like-btn:hover {
transform: scale(1.1)
}
.like-btn:active .heart {
animation: like 0.8s ease-in-out;
}

代碼很簡單，首先我們定義了`.heart`的位置以及動畫，然后定義`.like-btn`的樣式，包括背景圖片、光標(biāo)形狀等，同時還定義了當(dāng)鼠標(biāo)懸停在按鈕上時的樣式和當(dāng)用戶點贊時的樣式。

當(dāng)用戶點擊點贊按鈕時，就會出現(xiàn)一顆飄動的心形，不僅增加了點贊的趣味性，也讓頁面變得更加生動有趣。

這就是CSS點贊飄心效果，有興趣的同學(xué)可以試著自己動手實現(xiàn)一下哦！