一个文字版的进度条

看到一个文字高亮切换的效果，感觉可以改造成一个文字版的进度条效果。

先看效果:

一步步实现

接下来说下实现思路。
进度条的思路，基本都是下方一个100%的进度节点，上面叠放一个进度中的进度节点。这里也是一样。我们可以用伪类来作为进度中的变化节点。代码如下：

写代码的浩浩最帅！！

.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;
}

结束

好了，本文到此结束，希望本文对你有所帮助 :-)
最近新弄了一个公众号：写代码的浩，求关注 。后面会逐步把掌握的前端知识以及职场知识沉淀下来。
如果还有什么疑问或者建议，可以多多交流，原创文章，文笔有限，才疏学浅，文中若有不正之处，万望告知。