CSS向上的輪播效果非常實用，它可以讓網頁在不占用過多空間的同時展示更多的內容。下面我們來看看如何實現這個效果。

.slider {
height: 200px;
overflow: hidden;
position: relative;
}
.slider ul {
list-style: none;
margin: 0;
padding: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.slider li {
height: 100%;
}
.slider .slide1 {
background-color: #ccc;
}
.slider .slide2 {
background-color: #888888;
}
.slider .slide3 {
background-color: #333;
}
@keyframes slideUp {
from {
top: -200px;
}
to {
top: 0;
}
}
.slider ul li:nth-child(1) {
animation: slideUp 2s forwards;
}
.slider ul li:nth-child(2) {
animation: slideUp 2s 1s forwards;
}
.slider ul li:nth-child(3) {
animation: slideUp 2s 2s forwards;
}
.slider ul li:nth-child(4) {
animation: slideUp 2s 3s forwards;
}

首先，我們設置slider的高度為200px，并將其overflow屬性設置為hidden，這是為了限制輪播圖的顯示范圍。然后，我們使用position屬性將ul的位置設置為絕對定位，并將其top和left屬性都設置為0，這樣ul就會覆蓋在slider上。接著，我們設置li的高度為100%，這樣li就會自適應ul的寬度，從而平分slider的高度。

在CSS的最后，我們使用@keyframes來定義一個名為slideUp的動畫，它將li從頂部滑動到底部。注意，我們將第一次出現的li設置了動畫，而將后面的li用延遲來依次執行動畫。