當(dāng)前位置：首頁(yè) > 科技 > 軟件

純 CSS 實(shí)現(xiàn)標(biāo)簽自動(dòng)顯示超出數(shù)量

來(lái)源：責(zé)編：時(shí)間：2024-05-09 09:26:18 149觀看

導(dǎo)讀現(xiàn)代CSS強(qiáng)大的令人難以置信。這次我們來(lái)用 CSS 實(shí)現(xiàn)這樣一個(gè)功能：有多個(gè)寬度不同的標(biāo)簽水平排列，當(dāng)外層寬度不足時(shí)，會(huì)提示超出的數(shù)量，演示效果如下圖片如果讓我用 JavaScript來(lái)實(shí)現(xiàn)估計(jì)都有點(diǎn)折騰，畢竟寬度都是動(dòng)態(tài)的，要監(jiān)

現(xiàn)代CSS強(qiáng)大的令人難以置信。

這次我們來(lái)用 CSS 實(shí)現(xiàn)這樣一個(gè)功能：有多個(gè)寬度不同的標(biāo)簽水平排列，當(dāng)外層寬度不足時(shí)，會(huì)提示超出的數(shù)量，演示效果如下

圖片

如果讓我用 JavaScript來(lái)實(shí)現(xiàn)估計(jì)都有點(diǎn)折騰，畢竟寬度都是動(dòng)態(tài)的，要監(jiān)聽各部分的尺寸變化，包括標(biāo)簽的位置和外層的寬度，總之不是一兩行代碼就能搞定的。

現(xiàn)如今，純CSS也能完美的實(shí)現(xiàn)這樣的效果，而且比 JS 實(shí)現(xiàn)更加簡(jiǎn)單，一起來(lái)看看吧

一、CSS 實(shí)現(xiàn)思路

很多時(shí)候，CSS并沒有直接的實(shí)現(xiàn)方式，需要“繞”點(diǎn)彎路，將需求拆分成很多小點(diǎn)，然后逐一突破。

回到本文這里，其實(shí)有幾個(gè)問(wèn)題需要考慮：

CSS 如何動(dòng)態(tài)累計(jì)數(shù)字？
CSS 如何知道哪些元素在容器之外？
CSS 如何區(qū)分是否溢出（顯示數(shù)量）

關(guān)于第3點(diǎn)，其實(shí)在之前這篇文章中有詳細(xì)介紹，有興趣可以回顧一下，非常有意思

純 CSS 檢測(cè)文本是否溢出

那么第一點(diǎn)，CSS有沒有什么方式可以統(tǒng)計(jì)數(shù)量呢？

沒錯(cuò)，相信很多小伙伴已經(jīng)猜到了，就是利用 CSS計(jì)數(shù)器，示意如下

counter-reset: num var(--num);counter-increment: num;::after{	content: "+"counter(num);}

關(guān)于計(jì)數(shù)器，我之前也在很多文章中有用到

你可能不需要 JS！CSS實(shí)現(xiàn)一個(gè)計(jì)時(shí)器
如何讓CSS計(jì)數(shù)器支持小數(shù)的動(dòng)態(tài)變化？
還在使用定時(shí)器嗎？CSS 也能實(shí)現(xiàn)電子時(shí)鐘
動(dòng)畫合成小技巧！CSS 實(shí)現(xiàn)動(dòng)感的倒計(jì)時(shí)效果
自定義計(jì)數(shù)器小技巧！CSS 實(shí)現(xiàn)長(zhǎng)按點(diǎn)贊累積動(dòng)畫

然后是第二點(diǎn)，CSS有什么方式可以知道元素是出去了還是在視野之內(nèi)呢？

如果是用 JS來(lái)判斷的話，最穩(wěn)妥的方式應(yīng)該Intersection Observer（交叉觀察者），相信很多同學(xué)都用過(guò)，這個(gè)在圖片懶加載非常有用

交叉觀察器 API - Web API 接口參考 | MDN (mozilla.org)[1]

那么，CSS中有什么類似的呢？沒錯(cuò)，還是之前提到過(guò)的CSS滾動(dòng)驅(qū)動(dòng)動(dòng)畫。

不過(guò)這里用到的是視圖進(jìn)度，也就是關(guān)注的是元素自身位置，元素進(jìn)入到容器范圍之內(nèi)就會(huì)觸發(fā)動(dòng)畫，非常類似 JS中的Intersection Observer

tag{  animation: appear;  animation-timeline: view(inline);  animation-range: contain;}@keyframes appear{  to {    background-color: #9747FF;  }}

這里就不詳細(xì)介紹了，有興趣回顧之前這篇文章

CSS 滾動(dòng)驅(qū)動(dòng)動(dòng)畫終于正式支持了~

好了，關(guān)鍵原理就這些了，我們需要做的就是想辦法將「計(jì)數(shù)器」和「元素進(jìn)出容器范圍」關(guān)聯(lián)起來(lái)就行了，接著往下看

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

利用 CSS 計(jì)數(shù)器，我們可以很輕松的統(tǒng)計(jì)元素的數(shù)量。

先簡(jiǎn)單布局一下文章開頭的例子，HTML如下所示

<div class="con">  <a class="tag">HTML</a>  <a class="tag">CSS</a>  <a class="tag">JavaScript</a>  <a class="tag">Flutter</a>  <a class="tag">Vue</a>  <a class="tag">React</a>  <a class="tag">Svelte</a></div><span class="num"></span><!--用來(lái)計(jì)數(shù)的標(biāo)簽-->

然后美化一下

.con{  display: flex;  gap: 5px;  padding: 5px;  overflow: hidden;}.tag{  padding: .2em .5em;  background-color: #c49ef5;  color: #fff;  border-radius: 4px;  animation: appear;}.num::after{  content: "+0";  padding: .2em .5em;  background-color: #FFE8A3;  color: #191919;  border-radius: 4px;}

這樣就得到了水平排列的 tag 布局（超出隱藏），后面跟一個(gè)數(shù)字

圖片

現(xiàn)在我們定義一個(gè)計(jì)數(shù)器，然后通過(guò)每個(gè)tag進(jìn)行累計(jì)，有多個(gè)tag相當(dāng)于多少次累加，最后在::after中顯示出來(lái)

.con{  counter-reset: num;  /*計(jì)數(shù)器初始值，默認(rèn)為0*/}.tag{  counter-increment: num; /*計(jì)數(shù)器增量值，默認(rèn)為1*/}.num::after{  content: "+"counter(num); }

默認(rèn)計(jì)數(shù)器的起始值是 0，每次累計(jì)是1，所以這里最后得到了7，這樣就能實(shí)時(shí)統(tǒng)計(jì)元素的數(shù)量了

圖片

當(dāng)然，我們也可以自定義這些默認(rèn)值，比如

.con{  counter-reset: num 10;}.tag{  counter-increment: num -1;}

這種情況下，起始值是10，增量值是-1，所以最后得到了3，如下

圖片

那么，該如何統(tǒng)計(jì)容器之外的標(biāo)簽數(shù)量呢？

三、CSS 滾動(dòng)驅(qū)動(dòng)動(dòng)畫

這里我們要利用CSS 視圖進(jìn)度時(shí)間軸，也就是觀察元素自身的位置，在進(jìn)入到容器范圍之內(nèi)執(zhí)行動(dòng)畫。

拿上面這個(gè)例子，我們給標(biāo)簽添加一個(gè)動(dòng)畫，讓標(biāo)簽在進(jìn)入到容器之內(nèi)時(shí)變個(gè)顏色，實(shí)現(xiàn)如下

.tag{  animation: appear;  animation-timeline: view(inline);}@keyframes appear{  to {    background-color: #4d47ff;  }}

由于是水平方向，所以這里需要設(shè)置view(inline) ，效果如下

圖片

好像不是很明顯？這是因?yàn)閯?dòng)畫是在整個(gè)視區(qū)內(nèi)過(guò)渡的，我們可以改變動(dòng)畫時(shí)間線的區(qū)間animation-range，讓這個(gè)動(dòng)畫在進(jìn)出的一瞬間就變化

.tag{  animation: appear;  animation-timeline: view(inline);  animation-range: contain;}@keyframes appear{  from,to {    background-color: #4d47ff;  }}

效果如下

圖片

那么，這個(gè)效果和前面的計(jì)數(shù)器有什么關(guān)聯(lián)呢？

從效果上來(lái)看，在視區(qū)內(nèi)會(huì)執(zhí)行一個(gè)動(dòng)畫，如果在這個(gè)動(dòng)畫中加入計(jì)數(shù)器的累加會(huì)怎么樣呢？先去除原先的累加器

.tag{  /* counter-increment: num; */}@keyframes appear{  from,to {    background-color: #4d47ff;    counter-increment: num;  }}

效果如下

圖片

可以看到計(jì)數(shù)器已經(jīng)生效了，不過(guò)現(xiàn)在統(tǒng)計(jì)的在「可視區(qū)內(nèi)」標(biāo)簽的數(shù)量。而我們要統(tǒng)計(jì)的是「可視區(qū)外」的數(shù)量，好像反過(guò)來(lái)了，如何實(shí)現(xiàn)呢？

這里有兩種思路。

第一種，用總數(shù)減去可視區(qū)內(nèi)的數(shù)量，不就行了嗎？由于現(xiàn)在動(dòng)畫是針對(duì)可視區(qū)內(nèi)的，我們可以給計(jì)數(shù)器設(shè)置一個(gè)初始值，就是總量，然后動(dòng)畫中給累加值設(shè)置為-1，就相當(dāng)于減去當(dāng)前數(shù)量了，實(shí)現(xiàn)如下

.con{	counter-reset: num 7;}@keyframes appear{  from,to {    background-color: #4d47ff;    counter-increment: num -1;  }}

這樣就完美統(tǒng)計(jì)出了可視區(qū)外的數(shù)量了

圖片

還有一種方式，我覺得更加巧妙，需要反向思考。原理是重置當(dāng)前的累加值，比如默認(rèn)情況下，正常累加，進(jìn)入可視范圍，把累加值設(shè)置為0，不就相當(dāng)于可視區(qū)外的正常累加了嗎？

.tag{  counter-increment: num;}@keyframes appear{  from,to {    background-color: #4d47ff;    counter-increment: num 0;  }}

同樣能達(dá)到相同的效果

圖片

現(xiàn)在基本已經(jīng)達(dá)到我們需要的效果了

四、其他細(xì)節(jié)修正

首先是，在超出范圍時(shí)，需要在邊緣出添加一個(gè)半透明蒙層，這樣體驗(yàn)效果會(huì)更好。

半透明蒙層很好實(shí)現(xiàn)，只需要添加一個(gè)水平漸變的mask遮罩就行了

.con{  -webkit-mask: linear-gradient(to right, #fff calc(100% - 30px), transparent);}

效果如下

那么，如何在沒有超出時(shí)，不出現(xiàn)這個(gè)遮罩呢？

這個(gè)其實(shí)在之前的文章中有詳細(xì)介紹了，建議回顧一下

純 CSS 檢測(cè)文本是否溢出

利用CSS滾動(dòng)驅(qū)動(dòng)動(dòng)畫，可以檢測(cè)容器是否可滾動(dòng)，也就是是否超出。所以我們只需要將遮罩放在滾動(dòng)驅(qū)動(dòng)動(dòng)畫里就行了，關(guān)鍵實(shí)現(xiàn)如下

.con{  animation: check;  animation-timeline: scroll(x self);}@keyframes check{  from,to {    -webkit-mask: linear-gradient(to right, #fff calc(100% - 30px), transparent);  }}

效果如下

還有一個(gè)問(wèn)題，希望在沒有超出的時(shí)候不顯示后面的數(shù)量。

關(guān)于這個(gè)，我本來(lái)是打算用樣式查詢來(lái)實(shí)現(xiàn)，但是遇到了一個(gè)問(wèn)題，由于樣式查詢只能匹配到子元素，所以不得不將顯示數(shù)量的標(biāo)簽放到.con容器內(nèi)。但是這樣一來(lái)，mask遮罩就會(huì)出現(xiàn)問(wèn)題，就像這樣

遮罩層連同數(shù)量標(biāo)簽一起被裁剪了！

于是又想出了另一種方案，這個(gè)在以前的布局中其實(shí)用到的更多，那就是負(fù)margin。

實(shí)現(xiàn)很簡(jiǎn)單，給標(biāo)簽容器一個(gè)的負(fù)margin-right，這樣，右邊的數(shù)量就會(huì)被左邊的標(biāo)簽蓋住，比如

.con{  margin-right: -20px;}

效果如下

是不是已經(jīng)被蓋住一部分了？我們繼續(xù)向左偏移

.con{  margin-right: -50px;}

這樣就完全看不到右邊的數(shù)量了

那么，如何在超出時(shí)顯示數(shù)量呢？這里就體現(xiàn)出負(fù)margin的好處了，可以借助前一個(gè)元素來(lái)隱藏后一個(gè)元素，在這里，我們直接在前面的動(dòng)畫中還原margin就行了

.con{  animation: check;  animation-timeline: scroll(x self);}@keyframes check{  from,to {    -webkit-mask: linear-gradient(to right, #fff calc(100% - 30px), transparent);    margin-right: 0;  }}

這樣就完美實(shí)現(xiàn)了文章開頭所示效果了

你也可以訪問(wèn)以下鏈接來(lái)體驗(yàn)真實(shí)效果（Chrome115+）

CSS auto tag num (juejin.cn)[2]
CSS auto tag num (codepen.io)[3]

五、總結(jié)一下

以上就是本文的全部?jī)?nèi)容了，不知道你學(xué)會(huì)了嗎？下面總結(jié)一下實(shí)現(xiàn)重點(diǎn)：

很多時(shí)候，CSS并沒有直接的實(shí)現(xiàn)方式，需要“繞”點(diǎn)彎路
CSS計(jì)數(shù)器可以實(shí)現(xiàn)數(shù)字累加
CSS滾動(dòng)驅(qū)動(dòng)動(dòng)畫可以檢測(cè)元素是否在可視范圍之內(nèi)
CSS滾動(dòng)驅(qū)動(dòng)動(dòng)畫還能檢測(cè)元素是否內(nèi)容超出
計(jì)數(shù)累加器可以放在滾動(dòng)驅(qū)動(dòng)動(dòng)畫中，這樣在動(dòng)畫觸發(fā)時(shí)也就相當(dāng)于計(jì)數(shù)器生效了，這樣就能統(tǒng)計(jì)可視區(qū)的標(biāo)簽數(shù)量了
樣式查詢只能匹配到子元素，但是用子元素會(huì)受到mask遮罩的影響
負(fù)margin可以借助前一個(gè)元素來(lái)隱藏后一個(gè)元素

本文鏈接：http://www.tebozhan.com/showinfo-26-87492-0.html純 CSS 實(shí)現(xiàn)標(biāo)簽自動(dòng)顯示超出數(shù)量

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com

上一篇： RabbitMQ如何保證消息可靠性？

下一篇：如何在Ollama創(chuàng)建自定義模型？構(gòu)建本地大模型

標(biāo)簽：

熱門焦點(diǎn)

線程通訊的三種方法！通俗易懂

線程通信是指多個(gè)線程之間通過(guò)某種機(jī)制進(jìn)行協(xié)調(diào)和交互，例如，線程等待和通知機(jī)制就是線程通訊的主要手段之一。在 Java 中，線程等待和通知的實(shí)現(xiàn)手段有以下幾種方式：Object 類下
拼多多APP上線本地生活入口，群雄逐鹿萬(wàn)億市場(chǎng)

Tech星球（微信ID：tech618）文 | 陳橋輝 Tech星球獨(dú)家獲悉，拼多多在其APP內(nèi)上線了“本地生活”入口，位置較深，位于首頁(yè)的“充值中心”內(nèi)，目前主要售賣美食相關(guān)的
得物寵物生意「狂飆」，發(fā)力“它經(jīng)濟(jì)”

作者｜花花小萌主近日，得物宣布正式上線寵物鑒別，通過(guò)得物App內(nèi)的“在線鑒別”，可找到鑒別寵物的選項(xiàng)。通過(guò)上傳自家寵物的部位細(xì)節(jié)，就能收獲擁有專業(yè)資質(zhì)認(rèn)證的得物鑒
小米汽車電池信息疑似曝光：容量101kWh，支持800V高壓快充

7月14日消息，今日一名博主在社交媒體發(fā)布了一張疑似小米汽車電池信息的照片，顯示該電池包正是寧德時(shí)代麒麟電池，容量為101kWh，電壓為726.7V，可以預(yù)測(cè)小
華為Mate 60保護(hù)殼曝光：碩大后置相機(jī)模組凸起程度有驚喜

這段時(shí)間以來(lái)，關(guān)于華為新旗艦的爆料日漸密集。據(jù)此前多方爆料，今年華為將開始恢復(fù)一年雙旗艦戰(zhàn)略，除上半年推出的P60系列外，往年下半年的Mate系列也將
AI芯片初創(chuàng)公司Tenstorrent獲三星和現(xiàn)代1億美元投資

Tenstorrent是一家由芯片行業(yè)資深人士Jim Keller領(lǐng)導(dǎo)的加拿大初創(chuàng)公司，專注于開發(fā)人工智能芯片，該公司周三表示，已經(jīng)從現(xiàn)代汽車集團(tuán)和三星投資基金等
半導(dǎo)體需求下滑三星電子DS業(yè)務(wù)部門今年?duì)I業(yè)虧損預(yù)計(jì)超10萬(wàn)億韓元

7月17日消息，據(jù)外媒報(bào)道，去年下半年開始的半導(dǎo)體需求下滑，影響到了三星電子、SK海力士、英特爾等諸多廠商，營(yíng)收明顯下滑，部分廠商甚至出現(xiàn)了虧損。作為
AI藝術(shù)欣賞體驗(yàn)會(huì)在上海梅賽德斯奔馳中心音樂(lè)俱樂(lè)部上演

光影交錯(cuò)的鏡像世界，虛實(shí)幻化的視覺奇觀，虛擬偶像與真人共同主持，這些場(chǎng)景都出現(xiàn)在2019世界人工智能大會(huì)的舞臺(tái)上。8月29日至31日，“AI藝術(shù)欣賞體驗(yàn)會(huì)”在上海
親歷馬斯克血洗Twitter，硅谷的苦日子在后頭

文/劉哲銘　　編輯/李薇　　馬斯克再次揮下裁員大刀。　　美國(guó)時(shí)間11月14日，Twitter約4400名外包員工遭解雇，此次被解雇的員工的主要工作為內(nèi)容審核等。此前，T

AVt天堂网手机版,亚洲va久久久噜噜噜久久4399,天天综合亚洲色在线精品,亚洲一级Av无码毛片久久精品

純 CSS 實(shí)現(xiàn)標(biāo)簽自動(dòng)顯示超出數(shù)量

一、CSS 實(shí)現(xiàn)思路

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

三、CSS 滾動(dòng)驅(qū)動(dòng)動(dòng)畫

四、其他細(xì)節(jié)修正

五、總結(jié)一下

線程通訊的三種方法！通俗易懂

拼多多APP上線本地生活入口，群雄逐鹿萬(wàn)億市場(chǎng)

得物寵物生意「狂飆」，發(fā)力“它經(jīng)濟(jì)”

小米汽車電池信息疑似曝光：容量101kWh，支持800V高壓快充

華為Mate 60保護(hù)殼曝光：碩大后置相機(jī)模組凸起程度有驚喜

AI芯片初創(chuàng)公司Tenstorrent獲三星和現(xiàn)代1億美元投資

半導(dǎo)體需求下滑三星電子DS業(yè)務(wù)部門今年?duì)I業(yè)虧損預(yù)計(jì)超10萬(wàn)億韓元

AI藝術(shù)欣賞體驗(yàn)會(huì)在上海梅賽德斯奔馳中心音樂(lè)俱樂(lè)部上演

親歷馬斯克血洗Twitter，硅谷的苦日子在后頭

最新推薦

猜你喜歡

熱門推薦

相關(guān)資訊