CSS3動(dòng)態(tài)計(jì)數(shù)可以為網(wǎng)站增添動(dòng)態(tài)效果，提高用戶體驗(yàn)度。在CSS3中，我們可以借助transition和@keyframes來(lái)實(shí)現(xiàn)數(shù)字的自動(dòng)計(jì)數(shù)。

/*數(shù)字容器樣式*/
.count {
font-size: 40px;
font-weight: bold;
color: #333;
position: relative;
}
/*數(shù)字變化動(dòng)畫*/
.count:before,
.count:after {
content: attr(data-count);
position: absolute;
opacity: 0;
}
.count:before {
top: 0;
left: 0;
transition: opacity 0.2s ease-out;
}
.count:after {
top: -100%;
left: 0;
opacity: 0;
transition: top 0.4s ease-out, opacity 0.2s ease-out;
}
.count.counted:before {
opacity: 0;
}
.count.counted:after {
top: 0;
opacity: 1;
}

在以上代碼中，我們首先定義了數(shù)字容器.count的樣式，包括字體大小、字體粗細(xì)、顏色和相對(duì)定位。然后通過(guò):before和:after偽類選擇器來(lái)添加content屬性，設(shè)為data-count，這個(gè)是后面JS中傳入的數(shù)字。接下來(lái)，我們定義了數(shù)字變化的動(dòng)畫效果，通過(guò)為:before和:after設(shè)置不同的位置，以及速度和過(guò)渡效果來(lái)完成數(shù)字變化的效果。最后，我們?yōu)?count添加了.counted類來(lái)標(biāo)記數(shù)字已經(jīng)被計(jì)數(shù)完成。

在JS代碼中，我們可以通過(guò)以下方式來(lái)觸發(fā)數(shù)字的計(jì)數(shù)效果：

function countNumber(counter, number) {
var step = ~~(number/100),
i = 0;
var interval = setInterval(function() {
counter.innerHTML = i;
counter.setAttribute('data-count', i);
if(i >= number) {
counter.classList.add('counted');
clearInterval(interval);
}
i += step;
}, 1);
}
var numCounter = document.getElementById('num-counter');
countNumber(numCounter, 10000);

以上代碼中，我們首先定義countNumber函數(shù)來(lái)實(shí)現(xiàn)數(shù)字的計(jì)數(shù)效果。通過(guò)使用setInterval每隔1毫秒更新數(shù)字內(nèi)容，在循環(huán)中通過(guò)setAttribute更新:before和:after中的content屬性，觸發(fā)CSS動(dòng)畫效果，實(shí)現(xiàn)數(shù)字的自動(dòng)計(jì)數(shù)。最后，當(dāng)計(jì)數(shù)完成后，我們?yōu)閏ount容器增加.counted類，效果完成。