CSS是網頁設計中不可或缺的一部分。使用CSS可以為網頁添加各種各樣的效果，如字體、顏色和邊框等。而今天我們要介紹的是如何使用CSS實現圖片抖動。

img {
position: relative;
animation: shake 0.5s linear infinite;
}
@keyframes shake {
0% {transform: translate(0,0) rotate(0deg);}
10% {transform: translate(-10px,0) rotate(-5deg);}
20% {transform: translate(10px,0) rotate(5deg);}
30% {transform: translate(-10px,0) rotate(-5deg);}
40% {transform: translate(10px,0) rotate(5deg);}
50% {transform: translate(-10px,0) rotate(-5deg);}
60% {transform: translate(10px,0) rotate(5deg);}
70% {transform: translate(-10px,0) rotate(-5deg);}
80% {transform: translate(10px,0) rotate(5deg);}
90% {transform: translate(-10px,0) rotate(-5deg);}
100% {transform: translate(0,0) rotate(0deg);}
}

如上所示，我們首先要設定圖片的position屬性為relative，這是因為我們使用了transform屬性來移動圖片，需要以當前位置為基準進行變化。然后，我們設置了動畫效果，使用了animation屬性，其中shake指的是動畫名稱，0.5s表明動畫時長，linear表示動畫執行方式為勻速，infinite表示動畫無限循環。

最后，我們在關鍵幀聲明中調整了圖片的位置和旋轉角度，這樣就可以實現圖片抖動的效果了。