在網頁設計中，動態的圖像效果是非常重要的。一種常見的效果是圖片震動效果。在本文中，我們將介紹如何使用css創建圖片震動效果。

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

上面的代碼段展示了如何使用css為圖片添加鼠標懸停時的震動效果。首先，我們添加了:hover偽類來描述當鼠標懸停在圖像上時會發生的事情。接著，我們定義了一個名為shake的動畫。這個動畫是通過一系列的transform變換來實現的，每個變換都代表了震動中的一個幀。

您可以修改這些變換以自定義震動效果。例如，您可以增加或減少變換的數量、更改translate()和rotate()的值、或添加其他屬性來改變元素的樣式。

總之，借助css的強大功能，我們可以輕松地為圖片添加震動效果，從而使網頁更加生動有趣。