站長資訊網本篇文章給大家分享一個CSS自定義計數器的使用小技巧，聊聊如何利用它實現長按點贊累積動畫，希望對大家有所幫助！
如何快速入門VUE3.0：進入學習
【推薦學習：css視頻教程】
在某條 APP 中，如果長按點贊，會出現這樣花里胡哨的動畫，如下
這個動畫有兩部分組成，其中這個隨機表情的實現可以參考 coco 的這篇文章 巧用 transition 實現短視頻 APP 點贊動畫
比較類似，這里就不重復了，我們這里要實現的是這個不斷變化的數字動畫，如下演示
仔細觀察，主要有以下幾個交互
- 鼠標按下有一個向上出現的動畫，抬起會慢慢消失
- 數字不斷累加
- 提示文字在達到某一指定值時自動變化，鼓勵！> 加油!! > 太棒了!!!
一起看看如何實現的吧
一、鼠標按下抬起交互
使用偽元素可以讓 HTML 足夠簡潔和靈活，比如 HTML 如下
<button class="like">長按點贊</button>
用偽元素來實現提示文案，簡單修飾一下
.like{ position: relative; } .like::after{ position: absolute; bottom: 100%; width: max-content; font-size: 2rem; font-style: italic; font-weight: bolder; background-image: linear-gradient(#FFCF02, #FF7352); -webkit-background-clip: text; -webkit-text-fill-color: transparent; content:'x10'; }
效果如下
然后，我們需要將這個提示在默認情況下隱藏起來，按下的時候才出現
.like::after{ /**/ transform: translateY(100%); opacity: 0; visibility: hidden; transition: .3s; } .like:active::after{ visibility: visible; opacity: 1; transform: translateY(0); }
這樣很輕易就實現了一個按下就向上出現，抬起就還原的動畫
但是，這樣的動畫看著不太舒服，那么，如何在抬起時改變回退動畫呢？很簡單，把向上出現的過渡動畫設置在:active上，并且添加一個延時，保證在元素在消失后，位移動畫才還原
關于這個動畫技巧，可以參考我之前的這篇文章 CSS 實現按鈕點擊動效的套路
.like::after{ /**/ transform: translateY(100%); opacity: 0; visibility: hidden; transition: .3s .3s, 0s .6s transform; /*默認情況下沒有transform*/ } .like:active::after{ visibility: visible; opacity: 1; transform: translateY(0); transition: .3s; }
效果如下
二、數字不斷累加
再來看看 CSS 數字變化。
關于這個技巧，之前在這兩篇文章中都有提到：還在使用定時器嗎？CSS 也能實現電子時鐘和動畫合成小技巧！CSS 實現動感的倒計時效果
在以前，數字的變化可能需要創建多個標簽，然后改變位移來實現
<div> <span>1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> <span>...</span> </div>
這種方式需要創建多個標簽，略微繁瑣，也不易擴展，而且也沒辦法在偽元素中使用。
不過現在有更簡潔的方式可以實現了，那就是 CSS @property。這是干什么的呢？簡單來講，可以自定義屬性，在這個例子中，可以讓數字像顏色一樣進行過渡和動畫，可能不太懂，直接看例子吧
我們先通過 CSS 變量將數字渲染到頁面，這里需要借助計數器
有興趣的可以參考這篇文章：小tips: 如何借助content屬性顯示CSS var變量值
.like::after{ /**/ --t:0; counter-reset: time var(--t); content: counter(time); }
為了方便測試，這里先將提示設置為可見，效果如下
如何讓這個數字變化呢？可以用到 CSS 動畫，將--t變化到 999
@keyframes count { to { --t: 999 } } .like::after{ /**/ --t:0; counter-reset: time var(--t); content: counter(time); animation: count 100s steps(999) forwards; }
效果如下
然而并沒有什么動畫，其實是需要等100s以后才會直接變成999。然后最重要的一步來了，加上以下自定義屬性
@property --t { syntax: '<integer>'; inherits: false; initial-value: 0; }
對的，僅僅添加這一小段 CSS，動畫就出來了
是不是很神奇？可以這么理解，通過@property定義后，這個變量--t本身可以單獨設置動畫了，就像顏色變化一樣。
然后，我們要實現只有按下的時候才會出現動畫，可以默認將動畫暫停，按下的時候才運行
.like::after{ /**/ --t:0; counter-reset: time var(--t); content: counter(time); animation: count 100s steps(999) forwards; animation-play-state: paused; /*默認暫停*/ } .like:active::after{ /**/ animation-play-state: running; /*按下運行*/ }
現在看看效果吧
三、提示的階段變化
提示在數字不斷累積的過程中有一個階段性的變化，如下
-
0~20：鼓勵！ -
20~50：加油!! -
50~：太棒了!!!
那么，如何根據 CSS 變量來自動映射不同的提示呢？這里可以用到自定義計數器，比如，我們先自定義一個計數器
@counter-style 鼓勵 { system: cyclic; symbols: '鼓勵！'; range: 1 20; }
這樣定義了一個名為“鼓勵”的計數器，簡單解釋一下，system，表示計算系統，這里為cyclic，表示循環使用開發者提供的一套字符，字符由symbos定義。然后symbos表示計算符號，也就是具體展示的字符，這里指定為鼓勵!就行了。然后有個range屬性，表示計數器的范圍，這里指定為1 20。示意如下
這部分自定義計數器內容比較復雜，也比較新，有興趣的可以參考張鑫旭的這篇文章：CSS @counter-style規則詳細介紹
然后將這個自定義的計數器也通過偽元素渲染出來
.like::after{ content: counter(time) counter(time, 鼓勵); }
下面看下效果
可以看到，當計數在1~20范圍內，渲染的是自定義字符“鼓勵!”，當超過這個范圍后，又變成了普通的數字，因此我們需要做一個“回退”處理，也就是在這個區間外的規則，CSS 計數器也提供了這樣的能力，名為fallback，實現就是這樣
@counter-style 鼓勵 { system: cyclic; symbols: '鼓勵！'; range: 1 20; fallback: 加油 } @counter-style 加油 { system: cyclic; symbols: '加油！！'; range: 21 50; fallback: 太棒了 } @counter-style 太棒了 { system: cyclic; symbols: '太棒了！！！'; range: 51 infinite; }
相信應該比較好理解，當計數器range超出時，就會按照fallback的計數規則繼續執行，可以無限嵌套，上面可以稍微簡化一下，區間可以更加靈活一點，比如加油的區間，進入到這個計數器，起點肯定已經超過了20，所以可以把起點也改為0，簡化后如下
@counter-style 鼓勵 { system: cyclic; symbols: '鼓勵！'; range: 0 20; fallback: 加油 } @counter-style 加油 { system: cyclic; symbols: '加油！！'; range: 0 50; /*進入到這個計數器，起點肯定已經超過了20*/ fallback: 太棒了 } @counter-style 太棒了 { system: cyclic; symbols: '太棒了！！！'; }
示意如下
這樣就得到了文章開頭的演示效果
完整代碼可以訪問：
https://codepen.io/xboxyan/pen/gOeEMwP
https://code.juejin.cn/pen/7133856833428520963
https://xboxyan.gitee.io/demo/CSS_add_num_animation.html
四、總結一下
