CSS3 滾動(dòng)數(shù)字是指在網(wǎng)頁(yè)上顯示數(shù)字時(shí)，數(shù)字會(huì)以滾動(dòng)形式呈現(xiàn)出來(lái)。這種效果可以通過(guò) CSS3 的動(dòng)畫(huà)屬性來(lái)實(shí)現(xiàn)，下面是一個(gè)基本的實(shí)現(xiàn)方法。

/* HTML */
<div class="num">123456</div>
/* CSS */
.num {
width: 100%;
text-align: center;
font-size: 5em;
overflow: hidden;
white-space: nowrap;
}
.num::before {
content: " ";
display: inline-block;
width: 0;
height: 1em;
vertical-align: bottom;
animation: roll 5s linear infinite;
}
@keyframes roll {
100% {
transform: translateX(-100%);
}
}

以上代碼中，我們將數(shù)字放在一個(gè) div 元素中，并設(shè)置樣式使其居中、字體大小較大、寬度占滿父元素等。我們?cè)谠?div 元素前使用偽元素 “::before”，并設(shè)置其寬度為 0，高度為 1em，使其不會(huì)顯示出來(lái)。然后我們?yōu)閭卧卦O(shè)置動(dòng)畫(huà)屬性，其中 roll 為動(dòng)畫(huà)名稱，5s 為動(dòng)畫(huà)持續(xù)時(shí)間，linear 為動(dòng)畫(huà)緩動(dòng)函數(shù)，infinite 表示動(dòng)畫(huà)重復(fù)無(wú)限次。

在動(dòng)畫(huà)的關(guān)鍵幀中，我們將偽元素向左偏移 100%，使之滾動(dòng)一圈。因?yàn)閭卧乇旧硎遣伙@示的，所以看起來(lái)就像是 div 元素中的數(shù)字向左滾動(dòng)。

通過(guò)修改動(dòng)畫(huà)屬性和關(guān)鍵幀，我們還可以實(shí)現(xiàn)數(shù)字滾動(dòng)速度、方向、循環(huán)次數(shù)等的不同效果。