CSS中有很多有趣的樣式效果，其中一種就是圖片抖動效果。這種動態效果可以為網頁帶來更加生動活潑的感覺，讓網頁更具吸引力。下面我們來介紹如何使用CSS3來實現圖片抖動效果。

.img-shake {
position: relative;
}
.img-shake:hover img {
animation: shake 0.5s ease-in-out infinite;
}
@keyframes shake {
0% {
transform: translateX(0);
}
10%, 30%, 50%, 70%, 90% {
transform: translateX(-5px);
}
20%, 40%, 60%, 80% {
transform: translateX(5px);
}
100% {
transform: translateX(0);
}
}

我們首先給圖片添加一個相對定位的CSS樣式，為了方便控制圖片的位置。接著，在鼠標懸停在圖片上時，使用CSS3動畫屬性來定義抖動效果。最后，使用針對關鍵幀的@keyframe規則來定義抖動過程中圖片的位移。

通過實現上述CSS代碼，我們可以在網頁中添加有趣的圖片抖動效果，為網頁內容增添更多的色彩和生命力。