CSS是網(wǎng)頁(yè)設(shè)計(jì)與開發(fā)中非常重要的一環(huán)，通過CSS，我們可以對(duì)網(wǎng)頁(yè)樣式進(jìn)行非常細(xì)致的調(diào)整。其中，CSS中的圖片擺動(dòng)效果也是非常常見而又好玩的。

img:hover {
animation: swing 1s ease;
transform-origin: center;
}
@keyframes swing {
0% {
transform: rotate(0deg);
}
10% {
transform: rotate(-10deg);
}
20% {
transform: rotate(6deg);
}
30% {
transform: rotate(-6deg);
}
40% {
transform: rotate(3deg);
}
50% {
transform: rotate(-3deg);
}
60% {
transform: rotate(1deg);
}
70% {
transform: rotate(-1deg);
}
80% {
transform: rotate(0.5deg);
}
90% {
transform: rotate(-0.5deg);
}
100% {
transform: rotate(0deg);
}
}

如上代碼所示，我們可以使用CSS中的animation屬性來(lái)實(shí)現(xiàn)圖片的擺動(dòng)效果。其中，transform-origin屬性可以指定旋轉(zhuǎn)的中心點(diǎn)，而@keyframes則定義了圖片擺動(dòng)的具體過程。

值得注意的是，這個(gè)效果只在鼠標(biāo)移到圖片上時(shí)才觸發(fā)，因此我們需要使用:hover偽類來(lái)實(shí)現(xiàn)這一效果。此外，我們也可以根據(jù)實(shí)際需求進(jìn)行調(diào)整，如改變擺動(dòng)周期、改變旋轉(zhuǎn)角度等等。

總之，圖片擺動(dòng)效果是一個(gè)有趣的特效，可以為網(wǎng)頁(yè)增添一絲活力。通過CSS的靈活運(yùn)用，我們可以輕松實(shí)現(xiàn)這一效果，并定制出適合自己網(wǎng)頁(yè)風(fēng)格的效果。