當我們在做網站設計的時候，經常會搭配鼠標經過動畫來增加頁面的互動性和美觀性。其中，鼠標經過圖片抖動的效果是比較常見的一種。下面，我們就來學習一下如何使用CSS來實現這個效果。

首先，我們需要在HTML中插入要展示的圖片，并設置它的相應樣式。比如：

<div class="image-box">
<img src="image.jpg" alt="圖片">
</div>

.image-box{
position: relative;
width: 300px;
height: 200px;
overflow: hidden;
}
.image-box img{
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}

接著，在CSS樣式中，我們可以使用:hover偽類添加鼠標經過事件，并給圖片添加抖動效果的動畫。

.image-box:hover img{
animation: shake 0.6s;
}
@keyframes shake{
0%{transform: rotate(0deg);}
20%{transform: rotate(20deg);}
40%{transform: rotate(-20deg);}
60%{transform: rotate(20deg);}
80%{transform: rotate(-20deg);}
100%{transform: rotate(0deg);}
}

這里我們使用了CSS中的animation屬性，同時定義了keyframes，也就是抖動的動畫效果。這個抖動動畫的效果可以自行調整，比如修改旋轉角度、動畫時間、延遲等。

通過以上的代碼，我們就可以實現一個鼠標經過圖片抖動的效果。同時，我們也可以在實現這個效果的過程中，加深對于CSS動畫的理解和掌握。希望大家可以學以致用，打造出更加出色的網站設計。