在網頁設計中，CSS+圖片左右搖晃的效果是非常常見的一個動畫效果，能夠為網頁增添一些活潑的元素。下面我們將介紹如何實現這一效果。

.shake {
animation: shake 0.3s;
animation-iteration-count: infinite;
display: inline-block;
}
@keyframes shake {
0% { transform: translateX(0); }
25% { transform: translateX(-10px); }
50% { transform: translateX(10px); }
75% { transform: translateX(-10px); }
100% { transform: translateX(0); }
}

上面的CSS代碼是實現圖片左右搖晃的核心代碼，首先我們定義了一個名為“shake”的類，接著在該類中定義了一個animation動畫效果。具體而言，我們使用了CSS3的animation屬性，并設置了它的執行時間為0.3秒，循環執行次數為無限次。同時，我們還將需要讓左右搖晃的圖片設置為inline-block樣式。

接下來，我們使用@keyframes關鍵字來定義一個名為“shake”的動畫關鍵幀，該關鍵幀定義了在動畫執行過程中，圖片應該呈現出的樣式變化。具體而言，動畫從0%開始，在25%時圖片向左移動10個像素，然后在50%時向右移動10個像素，再在75%時向左移動10個像素，最后在100%執行完整個動畫，回到原始位置。

最后，我們將CSS與需要進行左右搖晃的圖片綁定。只需在圖片的HTML代碼中將其類名改為“shake”即可：

<img src="example.jpg" class="shake" />

如此，圖片就會在頁面中左右搖晃起來了。