一個文字版的進度條

寫程式碼的浩發表於2023-02-14

看到一個文字高亮切換的效果，感覺可以改造成一個文字版的進度條效果。

先看效果:

一步步實現

接下來說下實現思路。
進度條的思路，基本都是下方一個100%的進度節點，上面疊放一個進度中的進度節點。這裡也是一樣。我們可以用偽類來作為進度中的變化節點。程式碼如下：

<span class="progress" data-txt="寫程式碼的浩浩最帥！！">寫程式碼的浩浩最帥！！</span>
.progress {
  color: #c7c7c7;
}
.progress::after {
  content: attr(data-txt);
  color: #0c6723;
  display: inline-block;
}

這樣就有兩個文字。
第二步，需要把進度中的文字疊放到進度100%的節點上方，透過position來做。程式碼調整如下：

.progress {
  color: #c7c7c7;
  position: relative;
}
.progress::after {
  content: attr(data-txt);
  color: #0c6723;
  display: inline-block;
  position: absolute;
  left: 0;
  top: 0;
  background-color: #c8edd1;
  width: 100%;
}


改變下after的寬度，就能控制進度。但是after的寬度較小時，會發現文字被截斷。這個時候我們就需要加一個文字不截斷，並且將超出部分隱藏。

.progress::after {
  /* ...之前的程式碼  */
  word-break: keep-all;
  white-space: nowrap;
  width: 50%;
  overflow: hidden;
}

最後再對進度中的節點新增一個width的變化過程，用來控制進度條的進度。這個怎麼選技術方案可以看我之前的文章《一文說清這難搞的CSS動畫》。
這邊我用的是transition。
程式碼如下：

.progress::after {
  content: attr(data-txt);
  color: #0c6723;
  display: inline-block;
  position: absolute;
  left: 0;
  top: 0;
  word-break: keep-all;
  white-space: nowrap;
  width: 0%;
  overflow: hidden;
  transition: width 1s linear;
}
.progress:hover::after {
  width: 100%;
}

最終結果就是這樣:

但是這個變化不是很明顯。我們加一個文字的陰影和背景，讓變化明顯一點。

.progress::after {
  /* 之前的程式碼 */
  background-color: #c8edd1;
  text-shadow: 0px 1px 2px #aed7b8;
}

結束

好了，本文到此結束，希望本文對你有所幫助 :-)
最近新弄了一個公眾號：寫程式碼的浩，求關注 ?。後面會逐步把掌握的前端知識以及職場知識沉澱下來。
如果還有什麼疑問或者建議，可以多多交流，原創文章，文筆有限，才疏學淺，文中若有不正之處，萬望告知。

相關文章