數字加動畫是網頁設計中常見的效果，能夠增強頁面的視覺吸引力和互動性。而使用 CSS 實現數字加動畫效果也是開發者們常用的技能。接下來，我們將介紹如何使用 CSS 實現數字加動畫。

/* CSS 代碼 */
.counter {
font-size: 40px;
color: #000;
font-family: Arial;
text-align: center;
}
/* 動畫效果 */
.counter span::before {
content: '';
display: inline-block;
height: 100%;
vertical-align: text-top;
}
.counter-up span::before {
animation: counter-up var(--animation-time) ease-in-out forwards;
}
.counter-down span::before {
animation: counter-down var(--animation-time) ease-in-out forwards;
}
@keyframes counter-up {
from {
transform: translateY(0);
}
to {
transform: translateY(-100%);
}
}
@keyframes counter-down {
from {
transform: translateY(0);
}
to {
transform: translateY(100%);
}
}

上述代碼包括兩個類名：counter-up 和 counter-down，分別表示數值上升和下降的動畫效果。通過 CSS3 中的 @keyframes 關鍵字實現動畫，從而產生數字加動畫的效果。

在 HTML 中，我們可以使用以下代碼來展示數值加動畫效果：

123

通過將數字用 span 標簽包裹起來，再將所有數字放在一個 div 容器內，就可以實現數字加動畫效果了！

總結：通過 CSS 實現數字加動畫效果不僅簡單易懂，還可以增強頁面的視覺吸引力和互動性，從而提高用戶體驗。希望本文對您有所幫助！