CSS 數字隨機跳動

代碼演示：
.numbers{
display: inline-block;
font-size: 36px;
font-weight: bold;
color: #333;
animation: jump 1s ease-in-out infinite;
}
@keyframes jump{
0%{
transform: translateY(0);
}
50%{
transform: translateY(-20px);
}
100%{
transform: translateY(0);
}
}
段落講解：
在網頁設計中，有時需要用到數字隨機跳動的效果，比如在數字統計、計時器等場景里。我們可以使用CSS的動畫效果來實現數字的隨機跳動。
首先，我們給數字添加一個class：.numbers。在CSS樣式中，設置數字的樣式，包括字體大小、加粗、顏色等。然后，使用CSS動畫的關鍵幀（keyframes）來定義數字的跳動效果，并將其應用到數字的class上。在這段代碼中，關鍵幀動畫名為“jump”，含有3個關鍵幀，表示數字在0%、50%和100%位置時的狀態。通過transform屬性中的translateY()方法，實現數字在垂直方向上的跳躍效果。
最后，我們可以在html頁面中使用數字的class：numers。當數字被添加到頁面后，它將會動態地跳躍起來，為頁面增加不少趣味性。