讓你的網(wǎng)站更加動(dòng)感和有趣，可以通過(guò)加入不同的動(dòng)畫(huà)效果來(lái)實(shí)現(xiàn)。其中一種非常有趣的動(dòng)畫(huà)效果是左右晃動(dòng)。在這篇文章中，我們將學(xué)習(xí)如何使用css實(shí)現(xiàn)左右晃動(dòng)動(dòng)畫(huà)。

.code {
position: relative;
left: 0;
animation: shake 0.5s;
animation-iteration-count: infinite;
	}
@keyframes shake {
0% { left: 0; }
20% { left: -10px; }
40% { left: 10px; }
60% { left: -10px; }
80% { left: 10px; }
100% { left: 0; }
	}

首先，我們需要為我們的元素設(shè)置一個(gè)相對(duì)定位，這將使我們的元素的位置對(duì)未來(lái)的移動(dòng)動(dòng)畫(huà)做出響應(yīng)。然后，我們需要為我們的元素添加一個(gè)動(dòng)畫(huà)屬性，其中 shake 是動(dòng)畫(huà)的名稱，0.5s 是動(dòng)畫(huà)持續(xù)時(shí)間。

我們需要使動(dòng)畫(huà)不停地播放，因此我們使用 animation-iteration-count 屬性并將其設(shè)置為 infinite。接下來(lái)，我們使用 @keyframes 創(chuàng)建動(dòng)畫(huà)的關(guān)鍵幀。@keyframes 是一個(gè)動(dòng)畫(huà)的關(guān)鍵幀，其中我們定義了元素的各個(gè)屬性的值，例如 left 屬性，隨著時(shí)間的推移，元素的位置將隨之變化。

在我們的動(dòng)畫(huà)中，我們定義了元素的 left 屬性在動(dòng)畫(huà)的不同時(shí)間點(diǎn)上的不同值。例如，在動(dòng)畫(huà)的開(kāi)始時(shí)，元素的位置是左對(duì)齊的，因?yàn)樗闹凳?0。之后，在動(dòng)畫(huà)的 20% 的時(shí)間點(diǎn)上，元素將向左移動(dòng) 10px，因此在接下來(lái)的 20% 的時(shí)間內(nèi)仍會(huì)發(fā)生類似的抖動(dòng)。隨著動(dòng)畫(huà)的進(jìn)行，元素的位置將在選定的時(shí)間點(diǎn)上進(jìn)行移動(dòng)。

這就是如何制作左右晃動(dòng)動(dòng)畫(huà)的簡(jiǎn)單方法。你可以把這個(gè)代碼實(shí)現(xiàn)到你的網(wǎng)頁(yè)上，來(lái)使你的頁(yè)面更加有趣。