亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

  發(fā)布時(shí)間：2024-04-11 11:16:22   作者：徐_三歲   我要評論
有多個(gè)寬度不同的標(biāo)簽水平排列，當(dāng)外層寬度不足時(shí)，會(huì)自動(dòng)提示超出的數(shù)量，這篇文章主要介紹了純 CSS 實(shí)現(xiàn)多標(biāo)簽自動(dòng)顯示超出數(shù)量的思路詳解,需要的朋友可以參考下

實(shí)現(xiàn)效果

css實(shí)現(xiàn)：有多個(gè)寬度不同的標(biāo)簽水平排列，當(dāng)外層寬度不足時(shí)，會(huì)自動(dòng)提示超出的數(shù)量

在這里插入圖片描述

在這里插入圖片描述

實(shí)現(xiàn)思路

CSS 如何動(dòng)態(tài)累計(jì)數(shù)字？
利用 CSS計(jì)數(shù)器

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

CSS 如何知道哪些元素在容器之外？
CSS滾動(dòng)驅(qū)動(dòng)動(dòng)畫。這里用到的是視圖進(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;
  }
}

CSS 如何區(qū)分是否溢出（顯示數(shù)量）
利用CSS滾動(dòng)驅(qū)動(dòng)動(dòng)畫，可以檢測容器是否可滾動(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);
  }
}

完整代碼

<div class="wrap">
  <div class="con" style="--num:7">
    <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>
</div>
html,body{
  font-family: -apple-system, "BlinkMacSystemFont", sans-serif;
  margin: 0;
  height: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  background: #fff;
  gap: 20px;
  accent-color: #9747FF;
}
.wrap{
  width: 300px;
  display: flex;
  align-items: center;
  padding: 15px;
  outline: 2px solid #9747FF;
  gap: 5px;
  overflow: hidden;
}
.con{
  position: relative;
  display: flex;
  gap: 5px;
  padding: 5px;
  overflow: hidden;
  counter-reset: num;
  animation: check;
  animation-timeline: scroll(x self);
  margin-right: -46px;
}
@keyframes check{
  from,to {
    margin-right: 0;
    -webkit-mask: linear-gradient(to right, #fff calc(100% - 30px), transparent);
  }
}
.wrap::after{
  content: "+"counter(num);
  padding: .2em .5em;
  background-color: #FFE8A3;
  color: #191919;
  border-radius: 4px;
}
.tag{
  padding: .2em .5em;
  background-color: #c49ef5;
  color: #fff;
  border-radius: 4px;
  counter-increment: num 1;
  animation: appear;
  animation-timeline: view(inline);
  animation-range: contain;
}
@keyframes appear{
  from,to {
    background-color: #9747FF;
    counter-increment: num 0;
  }
}

到此這篇關(guān)于純 CSS 實(shí)現(xiàn)多標(biāo)簽自動(dòng)顯示超出數(shù)量的文章就介紹到這了,更多相關(guān)CSS 自動(dòng)顯示超出數(shù)量內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論