動畫編號計數器

CSS數字動畫，例如，想像一個數字從1變到2，然後從2變到3，然後從3變到4等等，持續指定時間。就像一個計數器，只不過由我們用於網頁上其他設計動畫的同一種動畫控制。這在設計儀錶盤等內容時可能很有用，可以為數字增添一些活力。令人驚奇的是，現在可以在CSS中完成這項工作，無需太多技巧。如果您願意，可以直接跳到新的解決方案，但首先讓我們看看我們過去是如何做的。

一種相當合乎邏輯的數字動畫方法是通過JavaScript更改數字。我們可以做一個相當簡單的setInterval，但這裡有一個更高級的答案，它使用一個接受開始值、結束值和持續時間的函數，因此您可以將其更像動畫一樣對待：

如果只使用CSS，我們可以使用CSS計數器通過在不同的關鍵幀調整計數來動畫化數字：

另一種方法是將所有數字排成一行，並動畫化它們的位置，一次只顯示一個數字：

這些示例中一些重複的代碼可以使用像Pug（用於HTML）或SCSS（用於CSS）這樣的預處理器，它們提供循環以使它們更容易管理，但出於目的故意使用原生代碼，以便您可以看到基本思想。

新的CSS解決方案

隨著對CSS.registerProperty和@property的最新支持，我們可以動畫化CSS變量。訣竅是將CSS自定義屬性聲明為整數；這樣就可以像其他任何整數一樣對其進行插值（例如在轉換中）。

 @property --num {
  syntax: '<integer> ';
  initial-value: 0;
  inherits: false;
}

div {
  transition: --num 1s;
  counter-reset: num var(--num);
}
div:hover {
  --num: 10000;
}
div::after {
  content: counter(num);
}</integer>

重要說明：在撰寫本文時，此@property語法僅受Chrome（以及其他Chromium內核瀏覽器，如Edge和Opera）支持，因此它並非跨瀏覽器兼容。如果您正在構建僅限Chrome的應用程序（例如Electron應用程序），則可以立即使用它，否則請等待。上面提到的演示具有更廣泛的支持。

CSS content屬性可用於顯示數字，但我們仍然需要使用counter將數字轉換為字符串，因為content只能輸出<string></string>值。

看看我們可以像任何其他動畫一樣緩動動畫嗎？超級酷！

類型化的CSS變量也可以在@keyframes中使用：

一個缺點？計數器只支持整數。這意味著小數和分數不在考慮範圍內。我們必須以某種方式分別顯示整數部分和小數部分。

我們能動畫化小數嗎？

可以將小數（例如--number）轉換為整數。以下是它的工作原理：

1. 註冊一個<integer></integer>CSS變量（例如--integer），並指定initial-value。
2. 然後使用calc()進行四捨五入：--integer: calc(var(--number))

在這種情況下，--number將四捨五入到最接近的整數，並將結果存儲到--integer中。

 @property --integer {
  syntax: "<integer> ";
  initial-value: 0;
  inherits: false;
}
--number: 1234.5678;
--integer: calc(var(--number)); /* 1235 */</integer>

有時我們只需要整數部分。有一種巧妙的方法可以做到這一點：--integer: max(var(--number) - 0.5, 0)。這適用於正數。這種方法甚至不需要calc()。

 /* @property --integer */
--number: 1234.5678;
--integer: max(var(--number) - 0.5, 0); /* 1234 */

我們可以以類似的方式提取小數部分，然後使用計數器將其轉換為字符串（但請記住，content值必須是字符串）。要顯示連接的字符串，請使用以下語法：

 content: "string1" var(--string2) counter(--integer) ...

這是一個動畫化帶小數百分比的完整示例：

其他技巧

因為我們使用的是CSS計數器，所以這些計數器的格式可以是數字以外的其他格式。這是一個將字母“CSS”動畫化為“YES”的示例！

哦，還有一個技巧：我們可以通過JavaScript獲取自定義屬性的計算值來調試值：

 getComputedStyle(element).getPropertyValue('--variable')

就是這樣！如今CSS的功能令人驚嘆。

以上是動畫編號計數器的詳細內容。更多資訊請關注PHP中文網其他相關文章！