CSS3 是一種新的網頁設計語言，它為網頁設計師帶來了更多的功能。其中之一就是 div 上下移動效果。

div {
position: relative;
}
div.move {
animation: move 2s infinite;
}
@keyframes move {
0% {
top: 0;
}
50% {
top: 50px;
}
100% {
top: 0;
}
}

如上代碼所示，我們首先給 div 設置了相對定位。這使得我們能夠在 div 中使用 top 屬性來實現上下移動效果。

接著，我們為具有 class 為 move 的 div 元素創建了一個動畫。這個動畫的名稱是 move，它的時間是 2 秒，它是無限重復的。

動畫的實現是通過關鍵幀來完成的。我們分別在 0%、50% 和 100% 這三個時間點上設置了 top 屬性的值。這樣，在動畫播放時，div 會從 0% 的位置開始上升到 50% 的位置，然后再從 50% 的位置下降回到 0% 的位置。

通過這種方式，我們可以輕松地在網頁上創建一些動態效果，使我們的網頁更加吸引人。