CSS 使數字增加

/* HTML 代碼 */
<p id="number">0</p>
/* CSS 代碼 */
#number {
text-align: center;
font-size: 48px;
font-weight: bold;
color: #333;
}
#number::before {
content: attr(data-number);
display: block;
animation: increase 2s ease-in-out forwards;
}
@keyframes increase {
from {
content: attr(data-number - 50);
}
to {
content: attr(data-number);
}
}

上面的 CSS 實現了一個數字的增加效果，具體實現方式如下：

1. HTML 代碼

<p id="number">0</p>

定義了一個 p 標簽，id 設置為 "number"，初始顯示內容為 "0"，用于顯示數字。

2. CSS 代碼

#number {
text-align: center;
font-size: 48px;
font-weight: bold;
color: #333;
}

定義了數字顯示樣式：居中、字體大小為 48px、字體加粗、顏色為 #333。

#number::before {
content: attr(data-number);
display: block;
animation: increase 2s ease-in-out forwards;
}

使用偽元素 ::before，將 data-number 屬性的值作為內容插入到 p 標簽內部開頭，使數字顯示出來，并設置其為塊級元素，與 p 標簽同級。使用 animation 屬性實現動畫效果，增加的數字從 data-number - 50 到 data-number （例如：如果 data-number 等于 100，增加的數字將從 50 開始動畫）。

@keyframes increase {
from {
content: attr(data-number - 50);
}
to {
content: attr(data-number);
}
}

使用 @keyframes 屬性定義動畫效果，關鍵幀 from 定義數字顯示從 data-number - 50 開始，關鍵幀 to 定義數字顯示到 data-number 結束。

通過上述方式，就可以實現數字的增加效果。