在網(wǎng)頁(yè)設(shè)計(jì)中，使用圖片是很常見的，然而為了增加圖片的吸引力，我們可以利用CSS的動(dòng)畫效果讓圖片產(chǎn)生抖動(dòng)效果。

首先，在CSS中，我們可以使用以下代碼來(lái)定義一個(gè)圖片：

img {
width: 200px;
height: 200px;
background-image: url('path-to-image.jpg');
background-size: cover;
border: none;
}

以上代碼會(huì)將圖片放在一個(gè)200px*200px的容器中，并設(shè)置背景圖片。我們可以通過(guò)調(diào)整這些屬性來(lái)自定義圖片的樣式。

接下來(lái)，我們可以使用以下代碼為圖片添加抖動(dòng)效果：

img:hover {
animation: shake 0.5s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes shake {
from { transform: translateX(0); }
to { transform: translateX(10px); }
}

以上代碼使用了CSS3動(dòng)畫效果中的關(guān)鍵幀（keyframes）功能。我們?yōu)槭髽?biāo)懸停在圖片上的狀態(tài)定義了一個(gè)“shake”類，這個(gè)類將讓圖片在一個(gè)周期內(nèi)不斷地來(lái)回?cái)[動(dòng)。我們可以通過(guò)修改動(dòng)畫的持續(xù)時(shí)間、循環(huán)次數(shù)、擺動(dòng)的方向和距離等屬性來(lái)自定義抖動(dòng)效果的樣式。

總的來(lái)說(shuō)，CSS動(dòng)畫效果是網(wǎng)頁(yè)設(shè)計(jì)中非常有用的一種技術(shù)，可以讓我們更加靈活地控制頁(yè)面元素的樣式和動(dòng)態(tài)效果，增加用戶的體驗(yàn)和吸引力。