《網頁設計》Html, javascript, css如何作數字會跳動的動畫呢？

 $

 

最近看到有人做了跳動數字動畫在網頁上，覺得有趣便研究了一下。參考。

Html, javascript, css如何作數字跳動的動畫呢？

數字動畫就是畫面上的數字會改變。如從1變到2，再從2變到3。網頁的動畫在如控制面板(dashboard)上很有用。

本篇在css的部分使用<style>，如下：

<style>

@property --percent {

syntax: "<number>";

initial-value: 0;

inherits: false;

}

@property --temp {

syntax: "<number>";

initial-value: 0;

inherits: false;

}

@property --v1 {

syntax: "<integer>";

initial-value: 0;

inherits: false;

}

@property --v2 {

syntax: "<integer>";

initial-value: 0;

inherits: false;

}

#id_A {

font: 800 40px monospace;

padding: 2rem;

transition: --percent 1s;

--temp: calc(var(--percent) * 100);

--v1: max(var(--temp) - 0.5, 0);

--v2: max((var(--temp) - var(--v1)) * 100 - 0.5, 0);

counter-reset: v1 var(--v1) v2 var(--v2);

}

#id_A::before {

content: counter(v1) "." counter(v2, decimal-leading-zero) "%";

}

</style>

本篇在<script>使用如下：

<script>

const genNumber = () => {

document.querySelector("#id_A").style.setProperty("--percent", Math.random());

};

setInterval(genNumber, 2000);

setTimeout(genNumber);

</script>

html body部分則使用<div>:

<div id="id_A">

</div>

則動畫的顯示如下：

$