CSS本身不支持圖片的循環(huán)旋轉(zhuǎn)動(dòng)畫，但是可以通過(guò)結(jié)合HTML和CSS實(shí)現(xiàn)。以下是一個(gè)簡(jiǎn)單的例子，展示如何使用CSS keyframes和animation屬性來(lái)實(shí)現(xiàn)圖片循環(huán)旋轉(zhuǎn)的效果：

HTML代碼:

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

CSS代碼：

.rotate-container {
  width: 200px; /* 設(shè)置容器寬度 */
  height: 200px; /* 設(shè)置容器高度 */
  position: relative; /* 設(shè)置定位 */
}
 
.rotating-image {
  width: 100%; /* 設(shè)置圖片寬度 */
  height: auto; /* 圖片高度自適應(yīng) */
  animation: rotate 5s linear infinite; /* 應(yīng)用動(dòng)畫 */
}
 
@keyframes rotate {
  from {
    transform: rotate(0deg); /* 開始旋轉(zhuǎn) */
  }
  to {
    transform: rotate(360deg); /* 結(jié)束旋轉(zhuǎn) */
  }
}

掃描二維碼手機(jī)查看該文章