CSS是網頁設計中必不可少的一部分，它可以用來實現各種變化效果，其中包括讓圖片左右搖晃的效果。本文將介紹如何使用CSS來實現這一效果。

img {
animation: shake 0.5s;
animation-iteration-count: infinite;
}
@keyframes shake {
0% {
transform: translateX(0);
}
25% {
transform: translateX(10px);
}
50% {
transform: translateX(0);
}
75% {
transform: translateX(-10px);
}
100% {
transform: translateX(0);
}
}

以上代碼將會讓圖片不斷地左右搖晃。我們可以解釋一下這段代碼：

首先，我們定義了一個圖片選擇器，然后通過animation屬性來觸發動畫效果，shake是我們定義的關鍵幀動畫，它會讓圖片在0.5秒內執行一次搖擺動作。

關鍵幀動畫中，我們使用了transform屬性來控制圖片的位置。從0%到25%的過程中，設定了圖片向右移動10像素的效果，這個效果在50%時回到了原位，然后在75%到100%之間設置了向左移動10像素的效果，并且最終回到了原位。

最后，我們通過animation-iteration-count屬性來實現了動畫的無限循環。

這是一個簡單而又實用的技巧，可以為你的網頁增添一份趣味。通過CSS的變化效果，我們可以將網頁設計得更加豐富多彩。