在網(wǎng)頁開發(fā)中，有時(shí)候需要讓文字垂直向上移動(dòng)，比如在輪播圖或動(dòng)畫中需要實(shí)現(xiàn)這樣的效果。那么該如何使用 CSS 來實(shí)現(xiàn)文字垂直向上移動(dòng)的效果呢？

/* 定義需要垂直向上移動(dòng)的文本樣式 */
.vertical-text {
position: relative;
top: 0; /* 將元素定位在初始位置 */
animation: move-up 1s ease-out infinite; /* 使用動(dòng)畫實(shí)現(xiàn)垂直向上移動(dòng)的效果 */
}
/* 定義向上移動(dòng)的動(dòng)畫 */
@keyframes move-up {
from {
top: 0; /* 初始狀態(tài) */
}
to {
top: -50px; /* 移動(dòng)到的位置，可根據(jù)需要調(diào)整 */
}
}

以上代碼中，我們首先定義了一個(gè)名為vertical-text的樣式，同時(shí)使用position: relative;將元素定位在初始位置。接著，我們使用animation屬性來定義一個(gè)名為move-up的動(dòng)畫，該動(dòng)畫在執(zhí)行時(shí)會(huì)以ease-out的方式緩慢移動(dòng)，執(zhí)行無限次數(shù)。

注意，動(dòng)畫的關(guān)鍵幀中，我們將文本元素的top屬性從初始的 0 移動(dòng)了 -50px，這樣就可以實(shí)現(xiàn)文字垂直向上移動(dòng)的效果。

最后，我們只需要在 HTML 中將需要垂直向上移動(dòng)的文本元素應(yīng)用該樣式即可：

<p class="vertical-text">Hello World!</p>