CSS數(shù)字變化動畫實(shí)例

代碼片段如下：
HTML部分：
<div>
<span class="number">0</span>
<button onclick="countUp()">+</button>
<button onclick="countDown()">-</button>
</div>
CSS部分：
.number {
font-size: 36px;
color: red;
transition: all 0.5s ease;
}
JavaScript部分：
var number = document.querySelector('.number');
function countUp() {
number.textContent = parseInt(number.textContent) + 1;
}
function countDown() {
if (parseInt(number.textContent) === 0) {
return;
}
number.textContent = parseInt(number.textContent) - 1;
}

上述代碼實(shí)現(xiàn)了一個簡單的數(shù)字變化動畫效果，通過點(diǎn)擊“+”和“-”按鈕實(shí)現(xiàn)數(shù)字的增加和減少。CSS部分通過使用transition屬性實(shí)現(xiàn)了數(shù)字變化平滑過渡的動畫效果。JavaScript部分通過事件綁定和DOM操作實(shí)現(xiàn)了數(shù)字的增加和減少。該實(shí)例可以用于構(gòu)建各種數(shù)字計(jì)數(shù)器、倒計(jì)時等動態(tài)數(shù)字效果。