CSS向上滾動的跑馬燈是一種非常有趣的網頁效果，它經常被用來展示新聞或者廣告。下面的pre標簽中是CSS代碼，可以實現這種效果。

.marquee {
height: 50px;
overflow: hidden;
position: relative;
}
.marquee p {
position: absolute;
width: 100%;
height: 100%;
margin: 0;
color: #fff;
animation: marquee 10s linear infinite;
}
.marquee:hover p {
animation-play-state: paused;
}
@keyframes marquee {
0% {
top: 50px;
}
100% {
top: -100%;
}
}

首先，我們創建了一個class為“marquee”的div，它的高度為50像素，overflow為hidden，這是為了讓內容超出視窗部分不被顯示。然后，我們給div加上了position:relative屬性，這是為了讓后代元素的position:absolute屬性相對于div生效。 在div中，我們創建了一個p標簽，它的寬度和高度都是100%，并且margin為0，所以它的位置和div重合。接下來，我們為p標簽創建了一個CSS動畫，它的名稱為“marquee”，時長為10秒，運動方式為線性，循環次數為無限。動畫效果是p標簽向上運動，同時讓頂部多出來的50像素產生滾動效果。 為了讓用戶能夠停止滾動，我們給div添加了:hover狀態下的樣式，將動畫的播放狀態設置為暫停。 最后，我們在@keyframes中定義了動畫的起始狀態和終止狀態，它們分別是p標簽向上移動50像素和向上移動100%的位置，這使得滾動效果可以一直循環。 在使用CSS向上滾動的跑馬燈時，我們只需把想要顯示在跑馬燈中的內容放入p標簽中即可。這種效果使得網頁更具活力和吸引力，同時也讓用戶更容易注意到展示的內容。