CSS時間滾動是一種常用于網頁開發中的效果，其可以讓頁面上的時間顯示始終保持更新，非常實用。下面我們來介紹一下如何使用CSS實現時間滾動。

/* HTML部分 */
<div class="container">
<div class="time">
<span>00:00</span>
<span>00:00</span>
<span>00</span>
</div>
</div>
/* CSS部分 */
.container {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
background-color: #f5f5f5;
}
.time {
display: flex;
justify-content: center;
align-items: center;
font-size: 50px;
color: #888;
}
.time span {
margin: 0 10px;
}
/* 時間滾動部分 */
@keyframes time {
from {
transform: translateY(0);
}
to {
transform: translateY(-100%);
}
}
.time span:nth-child(1) {
animation: time 60s linear infinite;
}
.time span:nth-child(2) {
animation: time 3600s linear infinite;
}
.time span:nth-child(3) {
animation: time 1s linear infinite;
}

首先，在HTML中創建一個包含時間的容器，其中用`span`標簽來分別表示小時、分鐘和秒鐘。接下來，在CSS中設置這個容器的樣式，包括樣式的布局、樣式的字體大小及顏色等。

最后，在CSS代碼中使用`@keyframes`來創建用于時間滾動的動畫，并對每個`span`標簽應用不同的動畫，以實現時間滾動的效果。其中`span:nth-child(1)`表示第一個`span`標簽應用60秒一次的動畫，`span:nth-child(2)`表示第二個`span`標簽應用3600秒一次的動畫，`span:nth-child(3)`表示第三個`span`標簽應用1秒一次的動畫。

CSS時間滾動通過簡單的HTML結構和較少的CSS代碼就可以實現，可以為網頁增添不少動態的效果，提高用戶體驗。