CSS文字上下滑動效果是一種常用的網(wǎng)頁動態(tài)效果之一。通常出現(xiàn)在新聞滾動條、廣告輪播圖、詳情頁展示等場景中。

/* CSS代碼實現(xiàn) */
.scroll-text{
height: 50px;
line-height: 50px;
overflow: hidden;
margin: 0 auto;
white-space: nowrap;
animation: scroll 5s linear infinite;
}
@keyframes scroll{
from{
transform: translateY(0);
}
to{
transform: translateY(-100%);
}
}

以上代碼便是實現(xiàn)文字上下滑動的最基本樣式。使用關鍵字“overflow”和“l(fā)ine-height”來決定內容展示的高度，從而實現(xiàn)滾動效果。其中屬性“white-space:nowrap”用來禁止文字自動換行。

再通過CSS3新特性“animation”，可以實現(xiàn)滾動效果的動畫化。使用“from”和“to”定義動畫的起點和終點，通過“translateY()”方法來控制垂直方向的位移，從而實現(xiàn)上下滾動的效果。而“l(fā)inear”決定滾動速度平穩(wěn)，時間長度可自定義。

在實際應用中，還可以結合JavaScript來實現(xiàn)更加靈活的文字滾動效果，如實現(xiàn)滾動停止、鼠標懸停等交互效果，從而更好地提升用戶體驗。