自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

自定義計(jì)數(shù)器小技巧！CSS 實(shí)現(xiàn)長(zhǎng)按點(diǎn)贊累加動(dòng)畫

作者：XboxYan
開發(fā) 前端
鼠標(biāo)按下和抬起的過渡動(dòng)畫通常是相反的，不過可以通過在按下時(shí)設(shè)置transition來改變抬起的動(dòng)畫。數(shù)字不斷累加可以借助@property來實(shí)現(xiàn)，它可以讓 CSS 變量像顏色一樣過渡或者動(dòng)畫。

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

圖片

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

圖片

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

圖片

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

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

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

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

使用偽元素可以讓 HTML 足夠簡(jiǎn)潔和靈活，比如 HTML 如下：

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

用偽元素來實(shí)現(xiàn)提示文案，簡(jiǎ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)，抬起就還原的動(dòng)畫。

圖片Kapture 2022-08-20 at 14.08.38

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

.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ù)字變化。

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

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

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

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

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

圖片

如何讓這個(gè)數(shù)字變化呢？可以用到 CSS 動(dòng)畫，將--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;
}

效果如下：

圖片

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

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

對(duì)的，僅僅添加這一小段 CSS，動(dòng)畫就出來了。

圖片

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

然后，我們要實(shí)現(xiàn)只有按下的時(shí)候才會(huì)出現(xiàn)動(dòng)畫，可以默認(rèn)將動(dòng)畫暫停，按下的時(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è)階段性的變化，如下

  1. 0~20：鼓勵(lì)！
  2. 20~50：加油!!
  3. 50~：太棒了!!!

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

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

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

圖片

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

然后將這個(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í)，就會(huì)按照fallback的計(jì)數(shù)規(guī)則繼續(xù)執(zhí)行，可以無限嵌套，上面可以稍微簡(jiǎn)化一下，區(qū)間可以更加靈活一點(diǎn)，比如加油的區(qū)間，進(jìn)入到這個(gè)計(jì)數(shù)器，起點(diǎn)肯定已經(jīng)超過了20，所以可以把起點(diǎn)也改為0，簡(jiǎn)化后如下：

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

示意如下：

圖片

這樣就得到了文章開頭的演示效果：

圖片

完整代碼可以訪問：CSS add num animation (codenpen.io)[5]或者CSS add num animation (juejin.cn)[6]或者CSS add num animation (gitee.io)[7]。

四、總結(jié)一下

以上就是全部?jī)?nèi)容了，還不錯(cuò)的動(dòng)畫小技巧，你學(xué)會(huì)了嗎？下面總結(jié)一下。

  1. 鼠標(biāo)按下和抬起的過渡動(dòng)畫通常是相反的，不過可以通過在按下時(shí)設(shè)置transition來改變抬起的動(dòng)畫。
  2. 數(shù)字不斷累加可以借助@property來實(shí)現(xiàn)，它可以讓 CSS 變量像顏色一樣過渡或者動(dòng)畫。
  3. 計(jì)數(shù)器可以讓CSS 變量渲染到偽元素上。
  4. animation-play-state可以實(shí)現(xiàn)按下動(dòng)畫開始，抬起動(dòng)畫暫停的效果。
  5. 自定義計(jì)數(shù)器可以讓指定計(jì)數(shù)范圍內(nèi)渲染某一些字符。
  6. 要實(shí)現(xiàn)計(jì)數(shù)的階段變化可以用fallback進(jìn)行回退，可以跳轉(zhuǎn)到另一個(gè)計(jì)數(shù)器。
  7. 提一下兼容性，Chrome 91+，目前還不太適合外部使用，但可以提前了解。

當(dāng)然，自定義計(jì)數(shù)器的潛力遠(yuǎn)遠(yuǎn)不止于此，后面還會(huì)進(jìn)行更多的挖掘與應(yīng)用。

參考資料

[1]CSS @property: https://developer.mozilla.org/zh-CN/docs/Web/CSS/@property。

[2]小tips: 如何借助content屬性顯示CSS var變量值: https://www.zhangxinxu.com/wordpress/2019/05/content-css-var/。

[3]自定義計(jì)數(shù)器: https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style。

[4]CSS @counter-style規(guī)則詳細(xì)介紹: https://www.zhangxinxu.com/wordpress/2021/10/css-counter-style/。

[5]CSS add num animation (codenpen.io): https://codepen.io/xboxyan/pen/gOeEMwP。

[6]CSS add num animation (juejin.cn): https://code.juejin.cn/pen/7133856833428520963。

[7]CSS add num animation (gitee.io): https://xboxyan.gitee.io/demo/CSS_add_num_animation.html。

責(zé)任編輯：姜華 來源： 前端偵探
自定義計(jì)數(shù)器CSS
相關(guān)推薦

2011-04-06 10:03:08

Cacti遠(yuǎn)程監(jiān)控

2011-03-31 16:03:20

cacti性能計(jì)數(shù)器

2023-08-08 08:01:22

微服務(wù)架構(gòu)服務(wù)

2022-08-11 09:30:52

transitionCSS

2017-07-19 14:59:26

Drawable動(dòng)畫實(shí)現(xiàn)

2017-07-18 16:07:23

Drawable動(dòng)畫Android

2022-10-25 15:12:24

自定義組件鴻蒙

2022-08-29 19:51:58

CSS計(jì)數(shù)器

2022-06-29 21:22:49

CSS動(dòng)感倒計(jì)時(shí)

2010-09-01 08:35:07

Visual Stud

2011-05-12 16:30:44

自定義滾動(dòng)條

2024-02-07 12:32:00

重構(gòu)技巧PythonCounter

2009-12-01 15:01:07

PHP生成訪問計(jì)數(shù)器

2011-08-09 17:16:56

CoreAnimati動(dòng)畫

2009-09-13 18:58:07

自定義LINQ提供器

2020-01-10 15:15:53

Redis點(diǎn)贊數(shù)據(jù)庫(kù)

2009-11-06 16:59:26

WCF性能計(jì)數(shù)器

2023-07-28 08:15:27

PC程序計(jì)數(shù)器

2024-05-09 00:00:00

CSS標(biāo)簽JavaScript

2015-03-24 13:46:29

C++多線程計(jì)數(shù)器特性實(shí)現(xiàn)
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)