CSS是前端開(kāi)發(fā)中的重要技術(shù)之一，通過(guò)CSS可以實(shí)現(xiàn)各種炫酷的效果，其中就包括了圖片動(dòng)畫(huà)效果。下面我們來(lái)學(xué)習(xí)一下如何通過(guò)CSS實(shí)現(xiàn)圖片動(dòng)畫(huà)效果。

.img{
width: 200px;
height: 200px;
background: url("image.jpg") no-repeat center center;
animation: move 2s infinite;
}
@keyframes move{
0%{transform: translateX(0);}
50%{transform: translateX(50px);}
100%{transform: translateX(0);}
}

在上述代碼中，我們首先設(shè)置了一個(gè)類(lèi)名為“img”的元素，這個(gè)元素的大小是200px * 200px，并且背景圖片是一張名為“image.jpg”的圖片，我們將背景圖片始終居中。接著，我們使用animation屬性來(lái)添加動(dòng)畫(huà)效果，并且傳入了兩個(gè)參數(shù)，第一個(gè)參數(shù)“move”表示動(dòng)畫(huà)的名稱(chēng)，第二個(gè)參數(shù)“2s”表示動(dòng)畫(huà)的持續(xù)時(shí)間是2秒。最后一個(gè)參數(shù)“infinite”表示動(dòng)畫(huà)會(huì)一直重復(fù)播放。

接下來(lái)我們定義了一個(gè)名為“move”的關(guān)鍵幀動(dòng)畫(huà)，這個(gè)動(dòng)畫(huà)首先從0%開(kāi)始，然后經(jīng)過(guò)50%時(shí)位置向右移動(dòng)了50像素，最后回到了0%的位置，完成了一輪循環(huán)。我們使用了“translateX”屬性來(lái)實(shí)現(xiàn)圖片的水平平移效果。

通過(guò)以上代碼，我們實(shí)現(xiàn)了一張圖片的水平平移動(dòng)畫(huà)效果。在實(shí)際項(xiàng)目中，我們還可以添加其他的CSS屬性，比如旋轉(zhuǎn)、縮放等效果，來(lái)打造更加炫酷的圖片動(dòng)畫(huà)效果。