在網頁設計中，圖片的搖動效果可以為網站帶來更具生動感的視覺效果。當用戶點擊圖片時，讓它搖晃幾下非常容易，下面就來介紹如何使用CSS來實現這個效果。

/*首先需要給圖片設置一些CSS屬性，如下所示：*/
img{
position:absolute;
}
/*下面是實現點擊圖片搖晃效果的代碼：*/
img:active{
animation: shake 0.5s;
}
/*定義動畫shake, 實現搖晃效果，代碼如下：*/
@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); }
}

上述代碼中，給圖片設置了絕對定位，這是因為動畫只在點擊時播放，而其他時間應該保持在原位置。接下來，使用偽類:active來定義圖片被點擊時的樣式，其中，animation屬性為動畫效果，shake為動畫名稱，0.5s為動畫時間。最后，定義動畫shake，實現搖晃效果。這個動畫共計6個關鍵幀，從0%到100%逐漸旋轉回歸原來位置。在實現該效果時，還可以調整關鍵幀的時間，次數等屬性，以獲得更靈活的效果。