CSS動畫是現(xiàn)代網(wǎng)頁設(shè)計中不可或缺的一部分，它可以幫助我們創(chuàng)造出豐富多彩的動態(tài)效果。本文將會介紹如何使用CSS動畫創(chuàng)建一個上下移動的效果。

/*CSS動畫代碼*/
.box {
position: relative;
animation: move 2s infinite;
}
@keyframes move {
0% {
top: 0;
}
50% {
top: 100px;
}
100% {
top: 0;
}
}

首先，我們需要先創(chuàng)建一個容器元素（本文使用box類名作為例子）。并將其position屬性設(shè)置為relative。接下來我們可以為該容器添加動畫屬性，這里使用的是animation。

在animation屬性中，我們還需要指定動畫的名稱以及實(shí)現(xiàn)方式。move是本文創(chuàng)建的動畫名稱。infinite則表示動畫應(yīng)該無限循環(huán)執(zhí)行。在這里我們將動畫設(shè)置了2秒，您可以根據(jù)需要進(jìn)行修改。

接下來是重點(diǎn)部分。我們需要使用@keyframes規(guī)則來定義動畫過程中的狀態(tài)。這里我們將動畫分為三個狀態(tài)。0%狀態(tài)對應(yīng)的是初始狀態(tài)，可以看到top的值為0。50%狀態(tài)表示動畫進(jìn)行到一半時的狀態(tài)，這里我們將top的值設(shè)為100px。最后一個狀態(tài)設(shè)為100%時，動畫將回到起始位置，即top的值為0。

有了以上代碼，我們便可以在網(wǎng)頁中展示出一個上下循環(huán)移動的動態(tài)效果了。當(dāng)然，您還可以根據(jù)需要對動畫中的樣式以及時間進(jìn)行修改，使其更符合您所需的效果。