CSS中的動(dòng)畫效果可以讓網(wǎng)頁(yè)更加生動(dòng)有趣，常見的動(dòng)畫效果之一就是讓圖片上下移動(dòng)。通過(guò)使用CSS的animation屬性，我們可以輕松實(shí)現(xiàn)這一效果。

img {
animation: moveUpAndDown 2s infinite;
}
@keyframes moveUpAndDown {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
100% {
transform: translateY(0);
}
}

首先，我們需要選定要添加動(dòng)畫效果的圖片。在上面的代碼中，我們使用了img選擇器。

接著，在該選擇器下，我們定義了一個(gè)名為moveUpAndDown的動(dòng)畫。這個(gè)動(dòng)畫會(huì)持續(xù)2秒鐘，并且會(huì)無(wú)限循環(huán)。

在動(dòng)畫的關(guān)鍵幀中，我們定義了三個(gè)時(shí)間點(diǎn)：0%，50%和100%。這些時(shí)間點(diǎn)分別表示動(dòng)畫播放到了哪里。在每個(gè)時(shí)間點(diǎn)上，我們都用transform屬性來(lái)改變圖片的位置。

具體來(lái)說(shuō)，在0%的時(shí)間點(diǎn)上，圖片的位置是在原處，不需要進(jìn)行偏移。而在50%的時(shí)間點(diǎn)上，我們通過(guò)translateY函數(shù)將圖片向上偏移10px，這樣圖片就會(huì)上移。最后，在100%的時(shí)間點(diǎn)上，圖片又回到了原來(lái)的位置。

有了這些CSS代碼，我們就可以讓圖片上下動(dòng)了！你可以根據(jù)自己的需要來(lái)調(diào)整動(dòng)畫持續(xù)時(shí)間和偏移量。