在網頁設計中，點贊功能是一個非常常見的元素。為了讓用戶更直接地感受到點贊的效果，我們通常會使用CSS來設置點贊動畫。

/* 定義按鈕樣式 */
.button {
width: 100px;
height: 50px;
background-color: #eee;
border: none;
border-radius: 25px;
padding: 0;
margin: 0;
position: relative;
overflow: hidden;
cursor: pointer;
}
/* 定義按鈕懸停樣式 */
.button:hover {
background-color: #ddd;
}
/* 定義按鈕中心圖標樣式 */
.icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 30px;
height: 30px;
background-image: url(icon.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
}
/* 定義點贊動畫樣式 */
@keyframes animate {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
/* 定義點贊后的效果樣式 */
.like {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 50px;
height: 50px;
background-image: url(like.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
animation: animate 0.5s;
}

以上是一些CSS的代碼示例，接下來我們來解釋一下。

首先，我們定義了一個按鈕的樣式，并且添加了一個名為“icon”的元素，作為按鈕的中心圖標。

然后，我們定義了一個名為“animate”的動畫，從大小1到1.2再到1的循環變化。這個動畫將用于在用戶點擊點贊之后的時候，讓點贊圖標呈現一個跳躍的效果。

最后，我們定義了一個名為“like”的類，將點贊后的圖片定位在按鈕中央，并且使用“animate”動畫使其跳躍起來。

通過這些CSS代碼的設置，我們可以在用戶點擊點贊按鈕的時候，讓圖標呈現一個生動有趣的效果，讓用戶更快樂地使用網頁。