本文目錄導(dǎo)讀：

1. 準(zhǔn)備階段
2. 使用CSS關(guān)鍵幀動畫
3. 使用CSS轉(zhuǎn)換和過渡

CSS中創(chuàng)建圖片動態(tài)擺動效果

在網(wǎng)頁設(shè)計中，利用CSS為圖片添加動態(tài)擺動效果，可以極大地提升用戶體驗，這種效果可以通過關(guān)鍵幀動畫、CSS3的轉(zhuǎn)換和過渡來實現(xiàn)，下面，我們將探討如何通過CSS為圖片創(chuàng)建左右擺動的效果。

準(zhǔn)備階段

確保你的網(wǎng)頁已經(jīng)鏈接了CSS樣式表，為需要擺動的圖片添加HTML元素，例如<img>

使用CSS關(guān)鍵幀動畫

關(guān)鍵幀動畫是CSS中創(chuàng)建動畫的一種強大方式，你可以通過@keyframes規(guī)則定義動畫的關(guān)鍵狀態(tài)。

@keyframes swing {
  0% { transform: rotate(0deg); }
  50% { transform: rotate(10deg); }
  100% { transform: rotate(-10deg); }
}

上述代碼定義了一個名為“swing”的動畫，它在旋轉(zhuǎn)之間擺動，接下來將這個動畫應(yīng)用到圖片上：

img {
  animation: swing 1s infinite; /* 應(yīng)用動畫到圖片上 */
}

這將使圖片左右擺動，你可以通過調(diào)整關(guān)鍵幀中的旋轉(zhuǎn)角度和動畫持續(xù)時間來調(diào)整擺動的幅度和速度，還可以通過調(diào)整動畫的迭代次數(shù)（infinite表示無限循環(huán)）來控制擺動的頻率。

使用CSS轉(zhuǎn)換和過渡

除了關(guān)鍵幀動畫外，還可以使用CSS的轉(zhuǎn)換和過渡屬性來實現(xiàn)簡單的左右擺動效果。

img {
  transition: transform 1s ease-in-out; /* 設(shè)置過渡效果 */
  transform: translate(-5px); /* 設(shè)置初始位置偏移 */
}
img:hover { /* 鼠標(biāo)懸停時改變擺動效果 */
  transform: translate(10px); /* 改變偏移量以產(chǎn)生擺動效果 */
}

在這個例子中，當(dāng)鼠標(biāo)懸停在圖片上時，圖片會左右移動，產(chǎn)生擺動效果，通過調(diào)整translate函數(shù)的參數(shù)值，你可以控制擺動的幅度和速度，使用transition屬性可以平滑過渡擺動動作，你還可以添加其他CSS樣式來增強視覺效果，添加陰影或背景模糊等效果可以使擺動更加生動逼真，通過CSS的關(guān)鍵幀動畫、轉(zhuǎn)換和過渡屬性，我們可以輕松地為網(wǎng)頁中的圖片添加動態(tài)擺動效果，在實際應(yīng)用中，可以根據(jù)需求和設(shè)計目標(biāo)選擇適合的方法來實現(xiàn)所需的擺動效果，注意保持代碼簡潔和易于維護，以提高網(wǎng)頁的加載速度和用戶體驗。