CSS可以讓圖片動(dòng)起來(lái)！通過(guò)簡(jiǎn)單的CSS代碼，我們可以給圖片添加各種動(dòng)畫效果，讓網(wǎng)頁(yè)更加生動(dòng)有趣。

我們需要給圖片添加一個(gè)CSS動(dòng)畫，在CSS中，我們使用@keyframes規(guī)則來(lái)定義動(dòng)畫的關(guān)鍵幀，我們可以創(chuàng)建一個(gè)名為“rotate”的動(dòng)畫，讓圖片旋轉(zhuǎn)360度：

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

我們需要將這個(gè)動(dòng)畫應(yīng)用到圖片上，在CSS中，我們使用animation屬性來(lái)定義動(dòng)畫的名稱、持續(xù)時(shí)間、延遲時(shí)間等，我們可以將“rotate”動(dòng)畫應(yīng)用到名為“image”的圖片上：

#image {
  animation: rotate 2s linear;
}

在這個(gè)例子中，我們將“rotate”動(dòng)畫應(yīng)用到了名為“image”的圖片上，并設(shè)置了持續(xù)時(shí)間為2秒，動(dòng)畫速度為線性，我們還可以設(shè)置更多的動(dòng)畫屬性，比如延遲時(shí)間、循環(huán)次數(shù)等。

除了旋轉(zhuǎn)動(dòng)畫，CSS還支持更多的動(dòng)畫效果，比如縮放、移動(dòng)等，我們可以根據(jù)自己的需求來(lái)選擇適合的動(dòng)畫效果，CSS還支持使用百分比來(lái)定義動(dòng)畫的關(guān)鍵幀，這樣我們可以更加靈活地控制動(dòng)畫的進(jìn)度和效果。

CSS可以讓圖片動(dòng)起來(lái)，讓網(wǎng)頁(yè)更加生動(dòng)有趣，通過(guò)學(xué)習(xí)和實(shí)踐CSS動(dòng)畫，我們可以創(chuàng)造出更多有趣的效果，提升用戶體驗(yàn)。