CSS垂直輪播是一種常見的網頁動效，能帶來美觀的視覺效果，也能讓內容更加生動。下面我們來介紹一種實現CSS垂直輪播的方法。

.container {
height: 100px; /* 容器高度 */
overflow: hidden; /* 隱藏超出容器的內容 */
position: relative;
}
.slider {
position: absolute;
top: 0; /* 從頂部開始滾動 */
animation: slide 3s infinite; /* 3秒輪播一次 */
}
@keyframes slide {
0% { transform: translateY(0); } /* 從頂部開始滾動 */
100% { transform: translateY(-100%); } /* 滾動到最底部 */
}

上述代碼中，我們使用了CSS動畫和絕對定位來實現垂直輪播。首先，給容器設置高度并隱藏超出容器的內容，然后將輪播內容使用絕對定位定位在容器頂部。接下來，使用CSS動畫讓輪播內容實現垂直向上滾動，并允許動畫無限循環。

我們可以在slider類中設置不同的樣式來達到不同的輪播效果，例如改變動畫時間、更換滾動方向等。

.slider {
position: absolute;
left: 0; /* 從左側開始滾動 */
animation: slide 5s linear infinite alternate; /* 5秒輪播一次，線性動畫，來回滾動 */
}

在實際項目中，我們還可以使用JavaScript動態生成輪播內容，實現更加豐富的視覺效果。

總之，CSS垂直輪播是一種簡單易用的網頁動效，能夠提升用戶體驗。我們可以根據項目需求進行定制化調整實現多樣化輪播效果。