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

1. 使用CSS動(dòng)畫
2. 使用CSS過(guò)渡
3. 使用CSS變形
4. 使用CSS濾鏡

圖片用CSS怎么動(dòng)起來(lái)

圖片用CSS動(dòng)起來(lái)是一個(gè)非常有趣且實(shí)用的技術(shù)，通過(guò)CSS，我們可以輕松地為圖片添加各種動(dòng)畫效果，使圖片更加生動(dòng)、吸引人，下面是一些關(guān)于圖片用CSS怎么動(dòng)起來(lái)的技巧和方法。

使用CSS動(dòng)畫

CSS動(dòng)畫是圖片動(dòng)起來(lái)的***常見(jiàn)方法，通過(guò)定義關(guān)鍵幀，我們可以控制圖片在一段時(shí)間內(nèi)的變化過(guò)程，我們可以使用@keyframes規(guī)則來(lái)創(chuàng)建一個(gè)簡(jiǎn)單的動(dòng)畫，使圖片從透明逐漸變?yōu)椴煌该鳎?/p>

@keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
.my-image {
  animation: fadeIn 2s;
}

使用CSS過(guò)渡

CSS過(guò)渡也是一個(gè)非常實(shí)用的技術(shù)，它可以在兩個(gè)狀態(tài)之間平滑過(guò)渡，我們可以使用過(guò)渡來(lái)制作一個(gè)簡(jiǎn)單的圖片放大效果：

.my-image {
  transition: transform 0.5s;
}
.my-image:hover {
  transform: scale(1.5);
}

使用CSS變形

CSS變形也可以用來(lái)制作一些有趣的動(dòng)畫效果，我們可以使用rotate函數(shù)來(lái)制作一個(gè)旋轉(zhuǎn)的圖片：

.my-image {
  transform: rotate(360deg);
  animation: rotate 3s linear infinite;
}

使用CSS濾鏡

CSS濾鏡也可以用來(lái)制作一些視覺(jué)***，我們可以使用sepia函數(shù)來(lái)將圖片轉(zhuǎn)換為褐色：

.my-image {
  filter: sepia(100%);
}

這些技巧和方法都可以幫助我們將圖片用CSS動(dòng)起來(lái)，使網(wǎng)頁(yè)更加生動(dòng)、有趣，還有很多其他的方法和技巧可以用來(lái)制作更復(fù)雜的動(dòng)畫效果，這些都需要我們不斷學(xué)習(xí)和探索。