CSS文本上下移動是網(wǎng)頁設(shè)計中常見的一個效果。通過使用CSS屬性,我們可以讓文本在垂直方向上上下移動。
/* CSS代碼示例 */ .move-up { position: relative; animation: moveUp 2s infinite alternate; } @keyframes moveUp { 0% { top: 0; } 100% { top: -10px; } }
在上述代碼中,我們首先給文本元素添加了一個相對定位的屬性,以便我們可以使用top屬性控制垂直位置。接下來,我們定義了一個moveUp動畫,設(shè)置了動畫的執(zhí)行時間為2s,無限循環(huán)交替播放。在動畫中,我們設(shè)定了文本元素的初始位置為0,即不偏移,最終位置向上偏移了10px。
通過以上代碼,我們就可以在網(wǎng)頁中實(shí)現(xiàn)文本上下移動的效果了,令頁面更加生動有趣。