CSS3 數字遞增是一種非常有用的技術,它可以讓網頁中的數字遞增顯示。比如在訪問量、銷售額等場景下,數字遞增可以增加用戶的觀感體驗,同時也可以讓數據更加動態。
// HTML <div class="count">1000</div> // CSS .count { font-size: 40px; text-align: center; animation: count-up 2s ease-in-out; } @keyframes count-up { from { // 起始值 transform: translateY(0); } to { // 目標值 transform: translateY(-100%); } }
上述代碼中,HTML部分我們定義了一個初始值為1000的div,CSS部分通過font-size和text-align設置了樣式,同時通過animation屬性設置了動畫。
animation屬性是CSS3中的動畫屬性,用于定義一個動畫。其中,count-up是動畫的名稱,2s表示動畫持續的時間,ease-in-out表示動畫的緩動函數(也可以是其他值),transform: translateY(-100%)表示在動畫結束時,div向上移動100%的高度。
值得注意的是,由于我們使用了動畫,所以數字不是實時更新的,而是在動畫執行時更新。另外,我們也可以使用JavaScript等腳本語言來實現更為復雜的數字遞增效果。