CSS是前端開發中非常重要的一種技術，經常被用來美化網站頁面的各種元素。其中，有一種非常有趣的效果，就是通過CSS讓圖片在鼠標滑過時出現搖晃的效果，讓頁面更加生動有趣。接下來，我們就來學習一下如何實現這個效果。

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

以上代碼中，我們使用了CSS的animation屬性和@keyframes關鍵字。在img:hover選擇器中，我們定義了一個名為shake的動畫，動畫時間為0.5秒，并且無限循環（animation-iteration-count: infinite）。@keyframes中定義了動畫的效果，通過rotate()函數來實現旋轉的效果。

通過這種方式，我們可以很簡單地實現鼠標滑過圖片搖晃的效果。當然，還有很多其他的CSS效果可以讓我們的頁面更加生動有趣，大家可以繼續探索學習。