CSS做鐘擺搖晃動(dòng)畫(huà)是一種很酷的效果，它可以讓你的網(wǎng)頁(yè)看起來(lái)更加生動(dòng)有趣。下面我們來(lái)學(xué)習(xí)一下如何實(shí)現(xiàn)它。

.swing {
position: relative;
animation: swing 2s ease-in-out infinite;
transform-origin: center bottom;
}
@keyframes swing {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(16deg);
}
100% {
transform: rotate(0deg);
}
}

代碼的關(guān)鍵是動(dòng)畫(huà)屬性animation和關(guān)鍵幀@keyframes。我們先來(lái)看一下animation屬性:

animation: swing 2s ease-in-out infinite;

其中，swing是我們定義的關(guān)鍵幀動(dòng)畫(huà)，2s是動(dòng)畫(huà)持續(xù)的時(shí)間，ease-in-out是變化速度的曲線(xiàn)，infinite表示動(dòng)畫(huà)無(wú)限循環(huán)。

接下來(lái)，我們定義@keyframes：

@keyframes swing {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(16deg);
}
100% {
transform: rotate(0deg);
}
}

我們定義了三個(gè)關(guān)鍵幀，分別是0%，50%，100%。這些百分比表示在動(dòng)畫(huà)的不同階段要做些什么。在這里，我們通過(guò)transform: rotate()來(lái)旋轉(zhuǎn)元素。50%時(shí)旋轉(zhuǎn)16度，其余的時(shí)間內(nèi)保持原始狀態(tài)。

最后，我們給元素添加.swing類(lèi)，讓它擁有動(dòng)畫(huà)效果。

<div class="swing"></div>

當(dāng)我們?cè)贖TML中使用這個(gè)類(lèi)時(shí)，元素就會(huì)隨著動(dòng)畫(huà)搖擺。這個(gè)效果很有趣，你可以在網(wǎng)站導(dǎo)航欄、頁(yè)面的某個(gè)特殊區(qū)域或者圖片上使用它。