CSS數字自加動畫是指通過CSS樣式控制數字的逐漸增加,實現數字自動更新的動畫效果。這種效果常見于網站的數據顯示、計數器、倒計時等功能場景。
.count { font-size: 40px; font-weight: bold; color: #333; animation: increase 2s ease-in-out infinite; } @keyframes increase { from { content: "0"; } to { content: attr(data-count); } }
上述代碼中,我們為數字的容器元素 .count 設置了動畫 increase ,動畫時間為 2 秒,變換效果為先緩慢再加速。同時,我們通過CSS偽元素 content 將數字從 0 增加到目標數值,也就是通過給 data-count 屬性賦值來展示數字逐漸增加的過程。
在HTML代碼中,我們需要將實際數值作為 data-count 屬性的值,例如:
<span class="count" data-count="1000">0</span>
這樣,當頁面加載時,數字容器的初始值為 0,通過動畫效果逐漸增加到 1000,實現了數字自動更新的動畫效果。您可以對代碼進行優化,比如添加自定義樣式和過渡效果,為您的網站增添活力。