CSS3數字累加動畫是一種常見的網頁動效，比如在數據統計、倒計時、動態數字展示等場景中經常用到。本文將介紹如何使用css3實現數字累加動畫。

/** HTML部分 **/
<div class="num-container">
<span class="num">0</span>
</div>
/** CSS部分 **/
.num-container {
width: 100px;
height: 50px;
font-size: 36px;
text-align: right;
background-color: #eee;
padding-right: 5px;
}
.num {
font-size: 36px;
transition: all 1s ease;
}
.num.active {
color: #f00;
font-weight: bold;
}

上述代碼定義了一個數字容器和一個數字元素。數字容器的寬高、字體大小等屬性可以根據實際需求進行調整，數字元素的初始值為0。

接下來，我們需要用JavaScript來實現數字累加的效果，代碼如下：

/** JS部分 **/
var NUM = 1000; //目標數字
var INTERVAL = 10; //累加間隔
var STEP = NUM / (1000 / INTERVAL); //每次累加的步長
var numEl = document.querySelector('.num');
var intervalId;
function startCount() {
var count = 0;
intervalId = setInterval(function() {
count += STEP;
numEl.innerHTML = Math.round(count);
if (count >= NUM) {
clearInterval(intervalId);
numEl.classList.add('active');
}
}, INTERVAL);
}
startCount();

在JavaScript部分，我們首先定義了目標數字NUM、累加間隔INTERVAL以及每次累加的步長STEP。累加過程中，每隔INTERVAL毫秒，累加一個STEP，同時更新數字元素的innerHTML。當count累加至目標數字NUM時，清除計時器intervalId，并為數字元素添加.active類，以在頁面上呈現顏色變化等效果。

最后，在HTML中調用JavaScript函數即可實現數字累加動畫：

/** HTML部分 **/
<div class="num-container">
<span class="num">0</span>
</div>
<script src="count.js"></script>

以上就是實現CSS3數字累加動畫的全部步驟。通過CSS的transition屬性和JavaScript的setInterval函數，我們可以輕松地實現數字的累加效果，增強網頁的視覺效果。