CSS3動畫為網(wǎng)頁設(shè)計提供了更多的可能性。今天我們將簡單介紹CSS3動畫中的“數(shù)字跳動”效果。

數(shù)字跳動的實現(xiàn)非常簡單。我們只需要定義一個CSS3動畫，使用@keyframes關(guān)鍵字定義動畫的關(guān)鍵幀，就可以輕松實現(xiàn)這個效果。

/* 定義動畫 */
@keyframes jump {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-50%);
}
100% {
transform: translateY(0);
}
}
/* 應(yīng)用動畫 */
.number {
animation: jump 1s ease-in-out infinite;
}

在這個例子中，我們使用@keyframes定義了一個名為“jump”的動畫，它分為三個關(guān)鍵幀：0%、50%、100%。每個關(guān)鍵幀都定義了一個transform屬性，通過translateY()函數(shù)設(shè)置元素在Y軸方向上的偏移。在這個動畫中，數(shù)字元素在0%時（即初始狀態(tài)）是在原位置，50%時跳到了元素高度的一半的位置，然后在100%時回到了原位置。

然后，我們將這個動畫應(yīng)用到我們想要跳動的數(shù)字元素上。通過添加一個animation屬性，并將其值設(shè)置為我們定義的動畫名“jump”和動畫時長、緩動函數(shù)和重復(fù)次數(shù)，我們就可以使數(shù)字元素動起來了。

<div class="number">0</div>

最后，我們只需將內(nèi)容放入一個