--- theme: hydrogen --- 这是我参与更文挑战的第25天，活动详情查看： [更文挑战](https://juejin.cn/post/6967194882926444557) ## 前言大家好哇，又到了夜深人静更文的时候啦！周五加班的我，准备开始更文就已经十一点了，但是更文大业不能停哇~做一件事无论成败，贵在过程，贵在坚持不是吗？今天我们来用实现**多行文字文字被颜色逐渐填满的特效**。前几天我写了一篇[《纯css实现：文字被颜色逐渐填满的特效》](https://juejin.cn/post/6976638626239086629)，有这么一条评论： ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f783f7afabf64913a355bc4c80f9cdd0~tplv-k3u1fbpfcp-watermark.image) 嗐~ 学习就学习，干嘛要举一反三呢？明明是禁止换行才能实现的效果，你问我多行文字怎么处理？想当年我手拿一把西瓜刀，从南天门砍到玉皇殿，我说我杀人不眨眼，你问我眼睛干不干？ ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fb51ee0f6f384797adfb3706c6d4e191~tplv-k3u1fbpfcp-watermark.image) 好吧，今天也顺便解决一下这个多行文字逐渐被填充的效果~ 那么一起来开始吧！ ## 过程按照我原先的想法，是JS动态判断有多少行，然后根据行数来分割，给每一行应用文字填充的动画效果即可。但是今天我突发奇想，如果把文字切割出来是不是更方便一些呢？思路如下： - 两个文字层要重叠，也就是说样式一样。 - 提取底部文字盒子的文字，遍历它，用`span`标签包裹，然后每隔0.3秒向上层盒子添加它。 - 把渐渐填满文字的动画加给`span`标签即可，这样当前文字动画结束之后，下个文字被添加进来，动画又开始。于是我敲出了如下代码： ```html

你好呀，我是南极大冰块~目前是一名在线掘金高级摸鱼师，精通摸鱼、划水、坐着睡觉、拍马屁、吹牛、甩锅、吵架等前端开发必备技能~关注我，一起学习好玩的前端知识吧！

``` 运行效果如下： ![GIF 2021-6-25 22-34-32.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b3d3303d5b224865b3081c335409c3f5~tplv-k3u1fbpfcp-watermark.image) 看起来似乎没什么问题？其实不然，最右边动画的时候会出现没有底层文字，只有上层文字的情况，虽然一闪而过，但也是问题： ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/48253a5a0d1f466287537270ee37f873~tplv-k3u1fbpfcp-watermark.image) 为什么会这样呢？因为`p`标签的宽度是确定的，当`span`标签由`0`变为`1em`的时候，它并不知道剩余的宽度是否能容下自身，当它发现剩余的空间容不下自身，于是就会换行，就出现了一闪而过的情况。 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a85c28140be74249ae61ed7f73b9508a~tplv-k3u1fbpfcp-watermark.image) 怎么解决这个问题呢？我想到了两端对其，于是我给`p`标签加了`text-align: justify;`,我满心欢喜的以为解决了这个小问题，结果发现运行效果如下：这这这。。。布局都乱掉了啊喂！这是因为我给`span`设置了宽度`1em`，相当于是`36px`，它并不会跟着`p`标签变得两端对齐，那么怎么做呢？很简单，给`p`标签应用设置等宽字体，然后p标签就会被占满，即使它的宽度不设置`text-align: justify;`，看起来也是两端对其的，同时`span`标签的每一个字符也能完美重叠上去。但是中文的等宽字体下载都要收费，暂时没找到的合适的字体来验证。不过也算多了一种思路实现多行文字被颜色填充的效果，毕竟JS去获取行数的变化实在不够优雅~ ## 后记希望大冰块今天分享的内容能对你有所帮助，多行文字被颜色逐渐填满的特效可以用在首页，介绍页等吸引人注意的地方。实现起来其实也没那么难以实现，比如这篇文章加上代码，也就一小时左右搞定了~ 说起来今天的更文还是蛮顺利的~ 今天是我坚持日更的第二十五天，每天输出一点点，进步一点点。有志者，事竟成。大家一起加油呀~ **如果本文对你有帮助，别再是悄悄收藏啦！比如点个赞呀，关注大冰块呀，一起和大冰块学习更多好玩的技术博客吧~** ![d2a3b6f182407290c859b16b1d4715a3.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4b0075bd6dd642fab0f6e097e8427f58~tplv-k3u1fbpfcp-watermark.image) ## 更文挑战的文章目录如下： - 2021.06.01 [《多图预警！详细谈谈Flex布局的容器元素和项目元素的属性~》](https://juejin.cn/post/6968816441801998349) - 2021.06.02 [《如何把css渐变背景玩出花样来》](https://juejin.cn/post/6969128755067355143) - 2021.06.03 [《如何使用SVG制作沿任意路径排布的文字效果》](https://juejin.cn/post/6969449102882897950) - 2021.06.04 [《3大类15小类前端代码规范，让团队代码统一规范起来！》](https://juejin.cn/post/6969839212069650462) - 2021.06.05 [《团队管理之git提交规范：大家竟然都不会写commit记录？｜周末学习》](https://juejin.cn/post/6970275680047071240) - 2021.06.06 [《如何控制css鼠标样式以及扩大鼠标点击区域｜周末学习》](https://juejin.cn/post/6970694281447079944) - 2021.06.07 [《纯css实现：仿掘金账户密码登录时，小熊猫捂眼动作切换的小彩蛋》](https://juejin.cn/post/6970979674092634120) - 2021.06.08 [《从11个方面详细谈谈原型和原型链》](https://juejin.cn/post/6971451608135630862) - 2021.06.09 [《深入谈谈JavaScript的作用域及作用域链》](https://juejin.cn/post/6971804688656105485) - 2021.06.10 [《JavaScript中的闭包究竟是什么》](https://juejin.cn/post/6972067390045552654) - 2021.06.11 [《纯css实现：炫酷的视频文本蒙版效果》](https://juejin.cn/post/6972551777795178509) - 2021.06.12 [《申请一个免费的毒鸡汤api，并且用原生JS实现竖行文本的打字机效果》](https://juejin.cn/post/6972935210702733319) - 2021.06.13 [《纯css实现：多行文本框内的斑马条纹效果》](https://juejin.cn/post/6973225625708396558) - 2021.06.14 [《原生JS实现触摸滑动监听事件》](https://juejin.cn/post/6973541673196322847) - 2021.06.15 [《原生JS实现鼠标滚轮触发页面横向滚动》](https://juejin.cn/post/6974018969690734628) - 2021.06.16 [《原生JS实现跳转或刷新页面时，浏览器提示当前页面未保存》](https://juejin.cn/post/6974404535452172302) - 2021.06.17 [《原生JS的三大基础弹框探究》](https://juejin.cn/post/6974681606875250696) - 2021.06.18 [《纯css实现：固定在页面底部的按钮》](https://juejin.cn/post/6975162413549092895) - 2021.06.19 [《纯css实现：单行文本的打字机动画效果》](https://juejin.cn/post/6975531630836318222) - 2021.06.20 [《纯css实现：如何做个完美的平行四边形》](https://juejin.cn/post/6975899068740419591) - 2021.06.21 [《谈谈基于JS实现阻止别人调试通过控制台调试网站的问题》](https://juejin.cn/post/6976250246376456206) - 2021.06.22 [《纯css实现：文字被颜色逐渐填满的特效》](https://juejin.cn/post/6976638626239086629) - 2021.06.23 [《h5实现一个刮刮卡的动画效果》](https://juejin.cn/post/6977003095305928740) - 2021.06.24 [《纯css实现：文字可换行的下划线、波浪线等效果》](https://juejin.cn/post/6977381057439989796)