CSS圖像擺動(dòng)技巧

在CSS中，我們可以使用transform屬性來實(shí)現(xiàn)圖像的擺動(dòng)效果。transform屬性允許我們對(duì)元素進(jìn)行2D或3D轉(zhuǎn)換，包括旋轉(zhuǎn)、縮放、移動(dòng)等。

要實(shí)現(xiàn)圖像的擺動(dòng)效果，我們可以使用transform: rotate()函數(shù)來旋轉(zhuǎn)圖像，同時(shí)使用animation屬性來創(chuàng)建動(dòng)畫效果。animation屬性允許我們定義動(dòng)畫的持續(xù)時(shí)間、延遲時(shí)間、執(zhí)行次數(shù)等。

以下是一個(gè)簡(jiǎn)單的示例代碼，展示了如何使用CSS實(shí)現(xiàn)圖像的擺動(dòng)效果：

<div class="image-container">
  <img class="image" src="path/to/image.jpg" alt="Image">
</div>

.image-container {
  width: 200px;
  height: 200px;
  position: relative;
}
.image {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transform: rotate(0deg);
  animation: swing 2s infinite;
}
@keyframes swing {
  0% { transform: rotate(0deg); }
  50% { transform: rotate(180deg); }
  100% { transform: rotate(360deg); }
}

在上面的代碼中，我們定義了一個(gè)圖像容器和一個(gè)圖像元素，圖像元素使用transform屬性進(jìn)行旋轉(zhuǎn)，并使用animation屬性創(chuàng)建了一個(gè)名為swing的動(dòng)畫效果，在swing動(dòng)畫中，圖像從0度旋轉(zhuǎn)到360度，實(shí)現(xiàn)了圖像的擺動(dòng)效果。

這只是一個(gè)簡(jiǎn)單的示例，你可以根據(jù)自己的需求進(jìn)行調(diào)整和擴(kuò)展，你可以更改動(dòng)畫的持續(xù)時(shí)間、旋轉(zhuǎn)的角度等，以實(shí)現(xiàn)不同的擺動(dòng)效果。