乐趣区

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

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

先看成果:

一步步实现

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

完结

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

退出移动版