CSS實現計時器數字樣式

計時器是網頁中常見的元素，它可以用來展示倒計時、持續時間等信息。現在，我們來學習如何使用CSS來實現計時器數字的樣式。

1. 設置基本樣式

首先，我們需要設置計時器數字的基本樣式，比如字體、大小、顏色等。
.timer{
font-family: Arial, sans-serif;
font-size: 36px;
color: #333;
}

2. 給數字添加樣式

接著，我們需要給計時器中的數字添加樣式。這里我們以秒數為例，給個位和十位數字分別設置不同顏色。
.timer span:nth-child(1){
color: #f00; /* 設置十位數字顏色 */
}
.timer span:nth-child(2){
color: #00f; /* 設置個位數字顏色 */
}

3. 使用CSS動畫

為了讓計時器更加生動，我們可以使用CSS動畫來讓數字跳動。這里我們使用@keyframes來定義一個“蹦起”的動畫效果。
@keyframes jump{
0%{
transform: translateY(0); /* 初始位置 */
}
50%{
transform: translateY(-10px); /* 中間位置，向上移動10個像素 */
}
100%{
transform: translateY(0); /* 結束位置，回到初始位置 */
}
}
接著，我們將動畫應用到計時器數字上。
.timer span{
animation: jump 1s infinite; /* 應用動畫效果，持續1秒，無限循環 */
}

4. 完整代碼

.timer{
font-family: Arial, sans-serif;
font-size: 36px;
color: #333;
}
.timer span:nth-child(1){
color: #f00;
}
.timer span:nth-child(2){
color: #00f;
}
@keyframes jump{
0%{
transform: translateY(0);
}
50%{
transform: translateY(-10px);
}
100%{
transform: translateY(0);
}
}
.timer span{
animation: jump 1s infinite;
}

以上就是使用CSS實現計時器數字樣式的全部流程。讓我們一起來試一試吧！