數(shù)字變大又變小的CSS動畫是一種非常實用的特效，可以大大增強網(wǎng)頁的視覺效果。那么該如何實現(xiàn)這種效果呢？下面我們就通過代碼進行演示。

<div>
<p>點擊數(shù)字開始</p>
<div id="num">0</div>
</div>
<style>
#num {
font-size: 20px;
text-align: center;
transition: all 1s ease;
}
#num.animate {
font-size: 50px;
}
</style>
<script>
var num = document.getElementById('num');
num.addEventListener('click', function() {
num.classList.toggle('animate');
if(num.classList.contains('animate')) {
num.textContent = 100;
} else {
num.textContent = 0;
}
});
</script>

在上面的代碼中，我們通過HTML代碼定義了一個包含數(shù)字的div，通過CSS設置了數(shù)字的樣式，以及數(shù)字變化的動畫效果。在JavaScript代碼中，我們?yōu)閿?shù)字div添加了一個點擊事件，當點擊數(shù)字div時，通過添加/移除CSS類名來觸發(fā)數(shù)字變大/變小的動畫效果。

通過上面的實例，我們可以看出，實現(xiàn)數(shù)字變大又變小的CSS動畫并不難，只需要熟練掌握CSS3動畫和HTML/JavaScript基礎即可。相信在以后的前端開發(fā)中，這樣的特效將會更加常見，讓我們拭目以待吧。