在網頁設計中，圖片的展示是一個非常重要的環節。CSS樣式可以讓我們實現圖片的各種效果，其中左右晃動效果也是很有趣的一個。下面我們來看一下如何實現這個效果。

img {
position: relative;
-webkit-animation: swing 1s infinite ease-in-out;
animation: swing 1s infinite ease-in-out;
}
@-webkit-keyframes swing {
0% {
left: -10px;
}
50% {
left: 10px;
}
100% {
left: -10px;
}
}
@keyframes swing {
0% {
left: -10px;
}
50% {
left: 10px;
}
100% {
left: -10px;
}
}

以上代碼中，我們先給圖片一個相對定位的屬性，然后通過CSS3的animation屬性和keyframes關鍵字來實現左右晃動效果。其中，-webkit-animation和animation都是用來定義動畫的，其中swing是自定義的動畫名稱，1s是動畫持續時間，infinite代表動畫無限循環，而ease-in-out則是動畫的運動方式。

接下來是@-webkit-keyframes和@keyframes兩個關鍵字，用來定義動畫中的關鍵幀，從而描述一段時間內的動畫經歷的變化。具體地，在swing中，0%代表動畫的起始狀態，也就是圖片開始時到左側10px的距離。50%是動畫的中間狀態，此時圖片已經到達了右側的位置，距離左側10px的距離，最后100%代表動畫結束的狀態，回到起始位置。

通過以上的CSS樣式，我們可以實現圖片左右晃動的效果，讓圖片看起來更具有活力和趣味性。