CSS3動畫可謂是前端開發(fā)大勢所趨，其中數(shù)字增加的動畫效果也是很常用的，比如網(wǎng)站的計數(shù)器、一個數(shù)字逐漸增加的效果。下面我們使用CSS3動畫制作一個數(shù)字增加的效果。
/* CSS部分 */
.num {
font-size: 48px;
color: #333333;
}
/* 定義動畫 */
@keyframes count {
from {
transform: scaleX(0); /* 水平縮放 */
}
to {
transform: scaleX(1);
}
}
/* 加入動畫 */
.num-animation {
animation: count 1s ease-in-out forwards;
/* 1s為動畫時間，ease-in-out為動畫速度曲線，forwards為保留最后一幀的狀態(tài) */
}
/* HTML部分 */數(shù)字：0
在上面的代碼中，我們首先定義了數(shù)字的樣式，在動畫部分，我們使用CSS3中的@keyframes來定義動畫過程。在這里，我們使用transform屬性進(jìn)行動畫（水平縮放），并通過from和to來定義狀態(tài)。在.num-animation中添加animation屬性，將定義好的動畫加入數(shù)字中即可實(shí)現(xiàn)數(shù)字增加的動畫效果。
上一篇css3 動畫 酷炫顯示
下一篇css3 動畫保持