在網(wǎng)頁(yè)設(shè)計(jì)中，一些小巧有趣的動(dòng)畫(huà)可以增加用戶的互動(dòng)體驗(yàn)。本文將介紹一個(gè)利用CSS實(shí)現(xiàn)的點(diǎn)贊愛(ài)心漂浮動(dòng)畫(huà)。

.like {
position: relative;
}
.like span {
display: inline-block;
margin-right: 10px;
font-size: 14px;
color: #999;
}
.like a {
display: inline-block;
width: 20px;
height: 20px;
background: url(like.png) no-repeat;
background-size: contain;
margin-right: 10px;
position: relative;
top: 3px;
}
.like a:hover {
background-image: url(like-hover.png);
animation: like 0.5s forwards;
-webkit-animation: like 0.5s forwards;
}
@keyframes like {
0% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.2);
opacity: 0.7;
}
100% {
transform: scale(1);
opacity: 1;
}
}
@-webkit-keyframes like {
0% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.2);
opacity: 0.7;
}
100% {
transform: scale(1);
opacity: 1;
}
}

在HTML中，我們需要一個(gè)包含點(diǎn)贊數(shù)和點(diǎn)贊圖標(biāo)的容器，如下所示：

<div class="like">
<span>20</span>
<a href="#"></a>
</div>

通過(guò)CSS，我們給點(diǎn)贊圖標(biāo)添加了懸停效果，當(dāng)鼠標(biāo)懸停在點(diǎn)贊圖標(biāo)上時(shí)，會(huì)出現(xiàn)愛(ài)心漂浮的動(dòng)畫(huà)。關(guān)鍵在于我們利用CSS的animation屬性以及@keyframes規(guī)則，定義了一個(gè)由小到大再到小的過(guò)程，其中opacity屬性控制透明度變化。

總的來(lái)說(shuō)，這個(gè)點(diǎn)贊愛(ài)心漂浮動(dòng)畫(huà)雖然簡(jiǎn)單，但可以為網(wǎng)頁(yè)增加趣味性。當(dāng)然，我們也可以根據(jù)需要調(diào)整動(dòng)畫(huà)效果，比如調(diào)整愛(ài)心漂浮的速度、縮放比例等。