实现多行文字被颜色逐渐填满的特效-一一网

这是我参与更文挑战的第25天，活动详情查看：更文挑战

前言

大家好哇，又到了夜深人静更文的时候啦！周五加班的我，准备开始更文就已经十一点了，但是更文大业不能停哇~做一件事无论成败，贵在过程，贵在坚持不是吗？

今天我们来用实现多行文字文字被颜色逐渐填满的特效。

前几天我写了一篇《纯css实现：文字被颜色逐渐填满的特效》，有这么一条评论：

嗐~ 学习就学习，干嘛要举一反三呢？

明明是禁止换行才能实现的效果，你问我多行文字怎么处理？

想当年我手拿一把西瓜刀，从南天门砍到玉皇殿，我说我杀人不眨眼，你问我眼睛干不干？

好吧，今天也顺便解决一下这个多行文字逐渐被填充的效果~

那么一起来开始吧！

过程

按照我原先的想法，是JS动态判断有多少行，然后根据行数来分割，给每一行应用文字填充的动画效果即可。但是今天我突发奇想，如果把文字切割出来是不是更方便一些呢？思路如下：

两个文字层要重叠，也就是说样式一样。
提取底部文字盒子的文字，遍历它，用span标签包裹，然后每隔0.3秒向上层盒子添加它。
把渐渐填满文字的动画加给span标签即可，这样当前文字动画结束之后，下个文字被添加进来，动画又开始。

于是我敲出了如下代码：

    <style>
        .box{
            width: 888px;
            height: 300px;
            margin: 200px auto;
            position: relative;
        }
   
        p{
            position: absolute;
            top: 0;
            left: 0;
            font-size: 36px;
            font-weight: 600;
        }
        #text{
            color: #666;
        }
        #copyText{
            color: rgb(253, 145, 145);
        }


        span {
            display: inline-block;
            white-space: nowrap;
            background: linear-gradient(to right, #ABDCFF, #0396FF);
            -webkit-background-clip: text;
            color: transparent;
            animation: landIn 1s linear;
        }

        @keyframes landIn {
            0% {
                width: 0;
            }
            100% {
                width: 1em;
            }
        }
    </style>

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

    <script>
        let text = document.querySelector("#text")
        let copyText = document.querySelector("#copyText")
        // textContent 属性设置或返回指定节点的文本内容，以及它的所有后代。
        let letters = text.textContent.split("")
        console.log(letters)
        for (let i = 0; i < letters.length; i++) {
            let span = document.createElement("span")
            span.textContent = letters[i]
            setTimeout(() => {
                copyText.append(span)
            }, 1000*i)
        }
    </script>
复制代码