关于前端:一个文字版的进度条

看到一个文字高亮切换的成果，感觉能够革新成一个文字版的进度条成果。

先看成果:

一步步实现

接下来说下实现思路。
进度条的思路，根本都是下方一个 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;
}

完结

好了，本文到此结束，心愿本文对你有所帮忙 :-)
最近新弄了一个公众号：写代码的浩，求关注 😄。前面会逐渐把把握的前端常识以及职场常识积淀下来。
如果还有什么疑难或者倡议，能够多多交换，原创文章，文笔无限，满腹经纶，文中若有不正之处，万望告知。