CSS 文字上下輪播，指的是使文字內容在一個固定區域內垂直滾動，呈現出輪播的效果。這種效果通常用于展示滾動的消息、新聞標題、產品特性等內容，為網站的交互性和可視性提供了增強的視覺體驗。下面我們通過 CSS 編寫來實現文字上下輪播。

/* 通過設置容器高度和 overflow 屬性，使容器成為可以滾動的區域 */
.container {
height: 200px;
overflow: hidden;
}
/* 在容器內創建包裹文字內容的元素，通過設置其 top 屬性不斷往上移動，實現輪播效果 */
.container p {
position: relative;
top: 0;
animation: move 10s linear infinite;
}
/* 使用 CSS 動畫實現文字內容的運動效果 */
@keyframes move {
0% {
top: 0;
}
50% {
top: -100%;
}
100% {
top: 0;
}
}

以上代碼設置了容器的高度為 200px，使容器成為可以滾動的區域。在容器內創建了一個包裹文字內容的 p 元素，并且將其 position 屬性設置為 relative，top 屬性設置為 0。接著使用 CSS 動畫來實現文字內容的運動效果，這里使用 keyframes 關鍵字，通過不斷變化 top 屬性的值來控制文字的運動方向和速度。最后通過設置 animation 屬性，將動畫移動效果應用到文字包裹元素上，使其在容器內不斷上下輪播。