CSS圖片怎么來(lái)回移動(dòng)？對(duì)于網(wǎng)站設(shè)計(jì)師和開(kāi)發(fā)者來(lái)說(shuō)，如何運(yùn)用CSS來(lái)展示圖片是很重要的。懂得如何讓圖片來(lái)回移動(dòng)，可以增強(qiáng)網(wǎng)站的視覺(jué)效果和用戶(hù)交互體驗(yàn)。

/*定義keyframes動(dòng)畫(huà)*/
@keyframes move {
/*圖片從起始位置往右移動(dòng)*/
0% {
transform: translateX(0);
}
/*圖片從當(dāng)前位置往左移動(dòng)*/
50% {
transform: translateX(200px);
}
/*圖片回到起始位置*/
100% {
transform: translateX(0);
}
}
/*定義圖片樣式*/
img {
width: 200px;
height: 200px;
position: relative;
animation: move 3s infinite;
}

這里我們使用CSS3的動(dòng)畫(huà)特性來(lái)使圖片來(lái)回移動(dòng)。首先，我們定義了一個(gè)名為move的keyframes動(dòng)畫(huà)，通過(guò)transform來(lái)實(shí)現(xiàn)圖片的位移。

接著，我們定義了一個(gè)img樣式并將其設(shè)置為相對(duì)定位，使得圖片相對(duì)于文檔流有一個(gè)位置。然后將animation屬性設(shè)置為move 3s infinite，這樣就將move動(dòng)畫(huà)應(yīng)用到了圖片上。

最后，我們得到了一段動(dòng)畫(huà)代碼，能讓圖片不斷來(lái)回移動(dòng)。通過(guò)這個(gè)簡(jiǎn)單的示例，可以看到CSS動(dòng)畫(huà)和小圖標(biāo)的應(yīng)用是十分實(shí)用的。