本篇文章給大家分享一個(gè)CSS自定義計(jì)數(shù)器的使用小技巧，聊聊如何利用它實(shí)現(xiàn)長按點(diǎn)贊累積動畫，希望對大家有所幫助！

如何快速入門VUE3.0：進(jìn)入學(xué)習(xí)

【推薦學(xué)習(xí)：css視頻教程】

在某條 APP 中，如果長按點(diǎn)贊，會出現(xiàn)這樣花里胡哨的動畫，如下

這個(gè)動畫有兩部分組成，其中這個(gè)隨機(jī)表情的實(shí)現(xiàn)可以參考 coco 的這篇文章 巧用 transition 實(shí)現(xiàn)短視頻 APP 點(diǎn)贊動畫

比較類似，這里就不重復(fù)了，我們這里要實(shí)現(xiàn)的是這個(gè)不斷變化的數(shù)字動畫，如下演示

仔細(xì)觀察，主要有以下幾個(gè)交互

1. 鼠標(biāo)按下有一個(gè)向上出現(xiàn)的動畫，抬起會慢慢消失
2. 數(shù)字不斷累加
3. 提示文字在達(dá)到某一指定值時(shí)自動變化，鼓勵(lì)！> 加油!! > 太棒了!!!

一起看看如何實(shí)現(xiàn)的吧

一、鼠標(biāo)按下抬起交互

使用偽元素可以讓 HTML 足夠簡潔和靈活，比如 HTML 如下

<button class="like">長按點(diǎn)贊</button>

用偽元素來實(shí)現(xiàn)提示文案，簡單修飾一下

.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'; }

效果如下

然后，我們需要將這個(gè)提示在默認(rèn)情況下隱藏起來，按下的時(shí)候才出現(xiàn)

.like::after{   /**/   transform: translateY(100%);   opacity: 0;   visibility: hidden;   transition: .3s; } .like:active::after{   visibility: visible;   opacity: 1;   transform: translateY(0); }

這樣很輕易就實(shí)現(xiàn)了一個(gè)按下就向上出現(xiàn)，抬起就還原的動畫

但是，這樣的動畫看著不太舒服，那么，如何在抬起時(shí)改變回退動畫呢？很簡單，把向上出現(xiàn)的過渡動畫設(shè)置在:active上，并且添加一個(gè)延時(shí)，保證在元素在消失后，位移動畫才還原

關(guān)于這個(gè)動畫技巧，可以參考我之前的這篇文章 CSS 實(shí)現(xiàn)按鈕點(diǎn)擊動效的套路

.like::after{   /**/   transform: translateY(100%);   opacity: 0;   visibility: hidden;   transition: .3s .3s, 0s .6s transform; /*默認(rèn)情況下沒有transform*/ } .like:active::after{   visibility: visible;   opacity: 1;   transform: translateY(0);   transition: .3s; }

效果如下

二、數(shù)字不斷累加

再來看看 CSS 數(shù)字變化。

關(guān)于這個(gè)技巧，之前在這兩篇文章中都有提到：還在使用定時(shí)器嗎？CSS 也能實(shí)現(xiàn)電子時(shí)鐘和動畫合成小技巧！CSS 實(shí)現(xiàn)動感的倒計(jì)時(shí)效果

在以前，數(shù)字的變化可能需要?jiǎng)?chuàng)建多個(gè)標(biāo)簽，然后改變位移來實(shí)現(xiàn)

<div>     <span>1</span>   <span>2</span>   <span>3</span>   <span>4</span>   <span>5</span>   <span>...</span> </div>

這種方式需要?jiǎng)?chuàng)建多個(gè)標(biāo)簽，略微繁瑣，也不易擴(kuò)展，而且也沒辦法在偽元素中使用。

不過現(xiàn)在有更簡潔的方式可以實(shí)現(xiàn)了，那就是 CSS @property。這是干什么的呢？簡單來講，可以自定義屬性，在這個(gè)例子中，可以讓數(shù)字像顏色一樣進(jìn)行過渡和動畫，可能不太懂，直接看例子吧

我們先通過 CSS 變量將數(shù)字渲染到頁面，這里需要借助計(jì)數(shù)器

有興趣的可以參考這篇文章：小tips: 如何借助content屬性顯示CSS var變量值

.like::after{   /**/   --t:0;   counter-reset: time var(--t);   content: counter(time); }

為了方便測試，這里先將提示設(shè)置為可見，效果如下

如何讓這個(gè)數(shù)字變化呢？可以用到 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; }

效果如下

然而并沒有什么動畫，其實(shí)是需要等100s以后才會直接變成999。然后最重要的一步來了，加上以下自定義屬性

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

對的，僅僅添加這一小段 CSS，動畫就出來了

是不是很神奇？可以這么理解，通過@property定義后，這個(gè)變量--t本身可以單獨(dú)設(shè)置動畫了，就像顏色變化一樣。

然后，我們要實(shí)現(xiàn)只有按下的時(shí)候才會出現(xiàn)動畫，可以默認(rèn)將動畫暫停，按下的時(shí)候才運(yùn)行

.like::after{   /**/   --t:0;   counter-reset: time var(--t);   content: counter(time);   animation: count 100s steps(999) forwards;   animation-play-state: paused; /*默認(rèn)暫停*/ }  .like:active::after{   /**/   animation-play-state: running; /*按下運(yùn)行*/ }

現(xiàn)在看看效果吧

三、提示的階段變化

提示在數(shù)字不斷累積的過程中有一個(gè)階段性的變化，如下

• 0~20：鼓勵(lì)！

• 20~50：加油!!

• 50~：太棒了!!!

那么，如何根據(jù) CSS 變量來自動映射不同的提示呢？這里可以用到自定義計(jì)數(shù)器，比如，我們先自定義一個(gè)計(jì)數(shù)器

@counter-style 鼓勵(lì) {   system: cyclic;   symbols: '鼓勵(lì)！';   range: 1 20; }

這樣定義了一個(gè)名為“鼓勵(lì)”的計(jì)數(shù)器，簡單解釋一下，system，表示計(jì)算系統(tǒng)，這里為cyclic，表示循環(huán)使用開發(fā)者提供的一套字符，字符由symbos定義。然后symbos表示計(jì)算符號，也就是具體展示的字符，這里指定為鼓勵(lì)!就行了。然后有個(gè)range屬性，表示計(jì)數(shù)器的范圍，這里指定為1 20。示意如下

這部分自定義計(jì)數(shù)器內(nèi)容比較復(fù)雜，也比較新，有興趣的可以參考張鑫旭的這篇文章：CSS @counter-style規(guī)則詳細(xì)介紹

然后將這個(gè)自定義的計(jì)數(shù)器也通過偽元素渲染出來

.like::after{   content: counter(time)  counter(time, 鼓勵(lì)); }

下面看下效果

可以看到，當(dāng)計(jì)數(shù)在1~20范圍內(nèi)，渲染的是自定義字符“鼓勵(lì)!”，當(dāng)超過這個(gè)范圍后，又變成了普通的數(shù)字，因此我們需要做一個(gè)“回退”處理，也就是在這個(gè)區(qū)間外的規(guī)則，CSS 計(jì)數(shù)器也提供了這樣的能力，名為fallback，實(shí)現(xiàn)就是這樣

@counter-style 鼓勵(lì) {   system: cyclic;   symbols: '鼓勵(lì)！';   range: 1 20;   fallback: 加油 } @counter-style 加油 {   system: cyclic;   symbols: '加油??！';   range: 21 50;   fallback: 太棒了 } @counter-style 太棒了 {   system: cyclic;   symbols: '太棒了?。?！';   range: 51 infinite; }

相信應(yīng)該比較好理解，當(dāng)計(jì)數(shù)器range超出時(shí)，就會按照fallback的計(jì)數(shù)規(guī)則繼續(xù)執(zhí)行，可以無限嵌套，上面可以稍微簡化一下，區(qū)間可以更加靈活一點(diǎn)，比如加油的區(qū)間，進(jìn)入到這個(gè)計(jì)數(shù)器，起點(diǎn)肯定已經(jīng)超過了20，所以可以把起點(diǎn)也改為0，簡化后如下

@counter-style 鼓勵(lì) {   system: cyclic;   symbols: '鼓勵(lì)！';   range: 0 20;   fallback: 加油 } @counter-style 加油 {   system: cyclic;   symbols: '加油?。?#39;;   range: 0 50; /*進(jìn)入到這個(gè)計(jì)數(shù)器，起點(diǎn)肯定已經(jīng)超過了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

四、總結(jié)一下