看到一个文字高亮切换的成果，感觉能够革新成一个文字版的进度条成果。
先看成果:
一步步实现
接下来说下实现思路。
进度条的思路，根本都是下方一个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;}完结
好了，本文到此结束，心愿本文对你有所帮忙 :-)
最近新弄了一个公众号：写代码的浩，求关注 。前面会逐渐把把握的前端常识以及职场常识积淀下来。
如果还有什么疑难或者倡议，能够多多交换，原创文章，文笔无限，满腹经纶，文中若有不正之处，万望告知。