建站
咨詢
售后
建站咨詢
新聞中心
Kapture 2022-06-26 at 16.57.42
創(chuàng)新互聯(lián)公司主營防城網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,手機APP定制開發(fā),防城h5小程序制作搭建,防城網(wǎng)站營銷推廣歡迎防城等地區(qū)企業(yè)咨詢
這是一個非常“動感”的倒計時效果，在一些活動開場中比較常見，分析一下整個動畫過程，不難發(fā)現(xiàn)，有以下幾類動畫：
- 數(shù)字的變化
- 縮小和放大
- 透明度變化
不知道小伙伴能否觀察出來呢？下面來一起來看看具體實現(xiàn)吧！
一、數(shù)字的變化
先來看數(shù)字的變化。
這個技巧在之前的文章：還在使用定時器嗎？CSS 也能實現(xiàn)電子時鐘 中首次用到，這里再次介紹一下。
在以前，數(shù)字的變化可能需要創(chuàng)建多個標簽，然后改變位移來實現(xiàn)。
5
4
3
2
1
這種方式需要創(chuàng)建多個標簽，略微繁瑣，也不易擴展?，F(xiàn)在有更簡潔的方式可以實現(xiàn)了，那就是 CSS @property[1]。這是干什么的呢？簡單來講，可以自定義屬性，在這個例子中，可以讓數(shù)字像顏色一樣進行過渡和動畫，可能不太懂，直接看例子吧！
假設(shè) HTML 是這樣的：
然后我們通過 CSS 變量將數(shù)字渲染到頁面，這里需要借助偽元素和計數(shù)器。
有興趣的可以參考這篇文章：小tips: 如何借助content屬性顯示CSS var變量值[2]。
count-down::after{
counter-reset: time var(--t);
content: counter(time);
}
效果如下：
image-20220626135133534
如何讓這個數(shù)字變化呢？可以用到 CSS 動畫：
@keyframes count {
to {
--t: 0
}
}
count-down::after{
--t: 5;
counter-reset: time var(--t);
content: counter(time);
animation: count 5s forwards;
}
效果如下：
Kapture 2022-06-26 at 13.55.42
現(xiàn)在的效果僅僅是5秒后，數(shù)字從 5 變成了 0，并沒有 5 => 4 => 3 => 2 => 1 這種階段變化。然后最重要的一步來了，加上以下自定義屬性：
@property --t {
syntax: '';
inherits: false;
initial-value: 0;
}
對的，僅僅添加這一小段 CSS，效果就出來了。
Kapture 2022-06-26 at 14.03.07
是不是很神奇？可以這么理解，通過@property定義后，這個變量--t本身可以單獨設(shè)置動畫了，就像顏色變化一樣。
另外，使用計數(shù)器的好處是可以隨意更換類型，比如將上面的阿拉伯數(shù)字換成中文計數(shù)，只需要更換計數(shù)器類型就行了。
完整類型可以參考：list-style-type[3]。
count-down::after{
--t: 5;
counter-reset: time var(--t);
content: counter(time, cjk-decimal); /*中日韓十進制數(shù)*/
animation: count 5s forwards;
}
效果如下：
Kapture 2022-06-26 at 14.14.20
是不是非常方便呢？
二、倒計時的終點
上面的計數(shù)器最后的終點是“0”，顯然我們需要一些特定的提示，比如“Go~”。
如何改變最后一幀的狀態(tài)呢？這里有兩種方式：
- 通過動畫覆蓋
- 通過計數(shù)器覆蓋
首先來看第一種方式，這個比較好理解，重新定義一個動畫，在倒計時結(jié)束后，將最后一幀重置一下。
@keyframes stop {
to {
content: 'Go~';
}
}
count-down::after{
--t: 5;
counter-reset: time var(--t);
content: counter(time);
animation: count 5s forwards,
stop 5s step-end forwards;
}
·效果如下：
Kapture 2022-06-26 at 14.46.18
注意這里動畫函數(shù)是step-end，為啥是這個呢？step-end也可寫作steps(1,end)，你可以理解為在整個動畫只有兩種狀態(tài)，在運行過程中，都是初始狀態(tài)，只有到達最后一幀才改變狀態(tài)，下面是 MDN 的截圖。
下面來看第二種方式，通過自定義計數(shù)器來實現(xiàn)。原理其實和 JS 思維有些類似，當數(shù)字為 0 時，讓計數(shù)器指定一個特殊的值，具體實現(xiàn)如下：
@counter-style stop {
system: cyclic;
symbols: "Go~";
range: 0 0;
}
這里簡單解釋一下，這里有個range屬性，表示計數(shù)器的范圍，由于這里只需要指定為 0，所以是區(qū)間0 0。然后是system，表示計算系統(tǒng)，這里為cyclic，表示循環(huán)使用開發(fā)者提供的一套字符，字符由symbos定義。然后symbos表示計算符號，也就是具體展示的字符，這里指定為Go~就行了。
這部分自定義計數(shù)器內(nèi)容比較復雜，也比較新，有興趣的可以參考張鑫旭的這篇文章：CSS @counter-style規(guī)則詳細介紹[4]。
然后是應(yīng)用；
count-down::after{
/**/
counter-reset: time var(--t);
content: counter(time, stop); /*自定義計數(shù)器*/
}
這樣也能達到相同的效果，實現(xiàn)也更加優(yōu)雅；
Kapture 2022-06-26 at 14.46.18
三、縮放和透明度變化
這兩個動畫其實是同時進行的，可以放在一個動畫里。
@keyframes shark {
0%{
opacity: 1;
transform: scale(1);
}
50%{
opacity: 0;
transform: scale(0.4);
}
}
然后設(shè)置動畫時長為 1s，循環(huán) 5 次。
count-down::after{
--t: 5;
counter-reset: time var(--t);
content: counter(time);
animation: count 5s steps(5) forwards,
shark 1s 5;
}
效果如下：
Kapture 2022-06-26 at 16.47.09
是不是稍微有些突兀？因為數(shù)字的變化是突然的，需要將數(shù)字的變化隱藏到透明度為 0 的時候，為了達到這種效果，只需要將閃爍動畫延遲 0.5 秒即可。
count-down::after{
--t: 5;
counter-reset: time var(--t);
content: counter(time);
animation: count 5s steps(5) forwards,
shark 1s .5s 5; /*延遲 0.5s*/
}
這樣就自然多了；
Kapture 2022-06-26 at 16.51.37
不過還有優(yōu)化的空間。比如現(xiàn)在數(shù)字動畫有些太連貫了，如果希望數(shù)字出現(xiàn)后稍微停留一小會，或者說希望出現(xiàn)的慢一點，消失的快一點，如何處理呢？其實這比想象中的要容易許多，只需要改一下關(guān)鍵幀位置就行了，如下：
@keyframes shark {
0%{
opacity: 1;
transform: scale(1);
}
20%{
opacity: 0;
transform: scale(0.4);
}
}
同時，延遲的時間也需要改成 0.8 秒，效果如下：
Kapture 2022-06-26 at 16.57.42
這樣就實現(xiàn)了文章開頭所示效果。
下面重點來了~完整代碼如下：
@property --t {
syntax: '';
inherits: false;
initial-value: 0;
}
@counter-style stop {
system: cyclic;
symbols: "Go~";
range: infinite 0;
}
html,body{
margin: 0;
height: 100%;
display: grid;
place-content: center;
}
count-down{
display: flex;
align-items: center;
justify-content: center;
font-family: Consolas, Monaco, monospace;
font-size: 120px;
}
count-down::after{
--t: 5;
--dur: 1;
counter-reset: time var(--t);
content: counter(time, stop);
animation: count calc( var(--t) * var(--dur) * 1s ) steps(var(--t)) forwards,
shark calc(var(--dur) * 1s) calc(var(--dur) * .8s) calc(var(--t));
}
@keyframes count {
to {
--t: 0;
}
}
@keyframes shark {
0%{
opacity: 1;
transform: scale(1);
}
20%{
opacity: 0;
transform: scale(0.4);
}
}
你也可以訪問在線例子：CSS count-down(codepen.io)[5]或者CSS count-down(juejin.cn)[6]
另外，demo 中還有個小彩蛋，點擊可以重新運行動畫，實現(xiàn)方式如下：
count-down:active::after{
animation: none;
}
四、其他動畫效果
除了縮放效果，還可以有一些位移的動畫，比如這樣的：
@keyframes shark {
0%{
opacity: 1;
transform: translateY(0);
}
20%{
opacity: 0;
transform: translateY(100px);
}
}
效果如下：
Kapture 2022-06-26 at 17.07.00
是不是有點奇怪？動畫不夠連貫，一會向下一會向上，有沒有辦法消失和出現(xiàn)都是從上到下的呢？當然也是可以的，實現(xiàn)如下：
@keyframes shark {
0%{
opacity: 1;
transform: translateY(0);
}
20%{
opacity: 0;
transform: translateY(100px);
}
21%{
opacity: 0;
transform: translateY(-100px);
}
}
這里多加了一個非常“鄰近”的關(guān)鍵幀，表示在透明狀態(tài)下，“迅速”改變位移，這樣在數(shù)字出現(xiàn)時的動畫就感覺是從上到下的，整體更為流暢，效果如下：
Kapture 2022-06-26 at 17.15.02
還可以調(diào)整一下前面的縮放效果，讓出來的時候更大，效果也更為震撼。
@keyframes shark {
0%{
opacity: 1;
transform: scale(1);
}
20%{
opacity: 0;
transform: scale(.4);
}
21%{
opacity: 0;
transform: scale(5);
}
}
效果如下：
Kapture 2022-06-26 at 17.38.54
當然還有其他效果，比如旋轉(zhuǎn)，斜切等，這就需要發(fā)揮你的想象了~
五、總結(jié)和說明
以上就是本文的全部內(nèi)容了，一個簡單的小動畫，你學會了嗎？下面總結(jié)一下實現(xiàn)要點：
- 復雜動畫可以分解成多個簡單的動畫
- 數(shù)字的變化可以通過多個標簽，改變位移實現(xiàn)
- CSS 計數(shù)器可以將數(shù)字變量渲染到頁面
- CSS @property 可以將CSS變量設(shè)置動畫，就像顏色變化一樣
- CSS 計數(shù)器的好處是可以隨意更改類型，比如中文計數(shù)
- 倒計時的終點默認是數(shù)字 0 ，可以通過另一個動畫重置最后一幀
- 可以通過自定義 CSS 計數(shù)器，讓某個計數(shù)符號渲染成指定字符
- 縮放和透明的變化是同時進行的，可以放在一個動畫里
- 數(shù)字的變化需要注意安排在透明度為0的時候，不然數(shù)字變化很突兀
- 數(shù)字的出現(xiàn)和消失動畫可以添加一個鄰近的關(guān)鍵幀來快速歸位
另外，文中用了一些比較新的屬性，比如 @property，還有自定義計數(shù)器，不過沒關(guān)系，文中也都提到了其他解決方案，動畫的整體思路是不變的，如何觀察和分解動畫，這個才是最重要的。
本文名稱：動畫合成小技巧！CSS實現(xiàn)動感的倒計時效果
網(wǎng)站網(wǎng)址：http://m.fisionsoft.com.cn/article/coejjij.html
