跑馬燈是一種非常流行的網頁效果，它可以循環滾動顯示一些重要的文字，圖片或者新聞。常見的跑馬燈分為左右滾動和上下滾動兩種。在本文中，我們將介紹如何使用CSS制作上下滾動的跑馬燈效果。

/* 首先定義一個容器 */
.marquee {
height: 60px;
overflow: hidden;
position: relative;
border: 1px solid #ccc;
}
/* 定義滾動內容 */
.marquee p {
position: absolute;
margin: 0;
padding: 0;
line-height: 60px;
height: 60px;
width: 100%;
animation: marquee 10s linear infinite;
}
/* 定義滾動動畫 */
@keyframes marquee {
from {
transform: translate3d(0, 0, 0);
}
to {
transform: translate3d(0, -100%, 0);
}
}

首先，我們定義一個容器，設置它的高度和邊框樣式，overflow屬性設為hidden，以便隱藏超出容器的內容。接下來，我們定義滾動的內容，將它的position設為absolute，將它固定在容器的頂部。滾動內容必須設置高度和寬度，否則滾動將無法正常顯示。

最后，我們使用CSS的動畫屬性，定義滾動內容的動畫效果。通過transform: translate3d將滾動內容向上移動，同時循環播放這個動畫，就完成了上下滾動的跑馬燈效果。

總的來說，制作CSS的滾動效果并不難，只要理解了關鍵屬性和動畫原理，就可以輕松實現各式各樣的效果。