CSS數字動畫是在網頁設計中經常使用的一種技術,它將數字以特定的方式展示出來,從而達到提高頁面效果的目的。
.number{ font-size: 60px; font-weight: bold; text-align: center; animation: countUp 2s ease-in-out; } @keyframes countUp { 0% { opacity: 0; transform: translateY(50px) scale(0.5); } 100% { opacity: 1; transform: translateY(0px) scale(1); } }
上面的代碼中,.number是要添加動畫效果的數字的選擇器,通過設置它的樣式,我們可以使數字看起來更加突出。其中,font-size確定數字的大小,font-weight確定數字的粗細,text-align確定數字的對齊方式。
接著是關鍵幀的設置,通過設置動畫的開始和結束狀態,我們可以實現數字的動態效果。在這個例子中,我們通過opacity來控制數字的透明度,從而實現數字的淡入淡出效果,同時使用transform來控制數字的縮放和位置移動,從而實現數字移動的效果。
最后,通過animation來關聯選擇器和關鍵幀,我們就可以實現數字動畫的效果啦!