在網頁設計中，有時候需要給圖片添加一些動態的效果，讓網頁更生動有趣。其中，通過CSS讓圖片晃動是一種比較簡單和實用的方法。

img:hover{
animation: shake 0.5s;
}
@keyframes shake{
0% { transform: rotate(0deg); }
10% { transform: rotate(5deg); }
20% { transform: rotate(-5deg); }
30% { transform: rotate(5deg); }
40% { transform: rotate(-5deg); }
50% { transform: rotate(3deg); }
60% { transform: rotate(-3deg); }
70% { transform: rotate(2deg); }
80% { transform: rotate(-2deg); }
90% { transform: rotate(1deg); }
100% { transform: rotate(0deg); }
}

代碼中的“img:hover”表示鼠標在圖片上懸停時觸發效果，“animation”指定動畫效果，而“keyframes”則定義一系列動畫幀的樣式。

其中，“transform”是用于對元素進行旋轉、縮放、傾斜和移動等變換效果的屬性，這里我們通過旋轉讓圖片晃動。通過設置多個旋轉角度，并在不同時間點應用，形成循環動畫。

除了“rotate”外，還可以通過“translate”實現平移效果，通過“scale”實現放大縮小效果等等。CSS可以實現許多有趣的效果，發揮想象力，用CSS讓網頁更加生動有趣吧！