實現多行文字被顏色逐漸填滿的特效

這是我參與更文挑戰的第25天，活動詳情查看：更文挑戰javascript

前言

你們好哇，又到了夜深人靜更文的時候啦！週五加班的我，準備開始更文就已經十一點了，可是更文大業不能停哇~作一件事不管成敗，貴在過程，貴在堅持不是嗎？css

今天咱們來用實現多行文字文字被顏色逐漸填滿的特效。html

前幾天我寫了一篇《純css實現：文字被顏色逐漸填滿的特效》，有這麼一條評論：前端

嗐~ 學習就學習，幹嗎要觸類旁通呢？java

明明是禁止換行才能實現的效果，你問我多行文字怎麼處理？git

想當年我手拿一把西瓜刀，從南天門砍到玉皇殿，我說我殺人不見血，你問我眼睛幹不幹？web

好吧，今天也順便解決一下這個多行文字逐漸被填充的效果~api

那麼一塊兒來開始吧！瀏覽器

過程

按照我原先的想法，是JS動態判斷有多少行，而後根據行數來分割，給每一行應用文字填充的動畫效果便可。可是今天我突發奇想，若是把文字切割出來是否是更方便一些呢？思路以下：markdown

兩個文字層要重疊，也就是說樣式同樣。
提取底部文字盒子的文字，遍歷它，用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>
複製代碼

運行效果以下：

看起來彷佛沒什麼問題？其實否則，最右邊動畫的時候會出現沒有底層文字，只有上層文字的狀況，雖然一閃而過，但也是問題：

爲何會這樣呢？由於p標籤的寬度是肯定的，當span標籤由0變爲1em的時候，它並不知道剩餘的寬度是否能容下自身，當它發現剩餘的空間容不下自身，因而就會換行，就出現了一閃而過的狀況。

怎麼解決這個問題呢？我想到了兩端對其，因而我給p標籤加了text-align: justify;,我滿心歡喜的覺得解決了這個小問題，結果發現運行效果以下：

這這這。。。佈局都亂掉了啊喂！

這是由於我給span設置了寬度1em，至關因而36px，它並不會跟着p標籤變得兩端對齊，那麼怎麼作呢？

很簡單，給p標籤應用設置等寬字體，而後p標籤就會被佔滿，即便它的寬度不設置text-align: justify;，看起來也是兩端對其的，同時span標籤的每個字符也能完美重疊上去。

可是中文的等寬字體下載都要收費，暫時沒找到的合適的字體來驗證。不過也算多了一種思路實現多行文字被顏色填充的效果，畢竟JS去獲取行數的變化實在不夠優雅~

後記

但願大冰塊今天分享的內容能對你有所幫助，多行文字被顏色逐漸填滿的特效能夠用在首頁，介紹頁等吸引人注意的地方。實現起來其實也沒那麼難以實現，好比這篇文章加上代碼，也就一小時左右搞定了~ 提及來今天的更文仍是蠻順利的~

今天是我堅持日更的第二十五天，天天輸出一點點，進步一點點。有志者，事竟成。你們一塊兒加油呀~

若是本文對你有幫助，別再是悄悄收藏啦！好比點個贊呀，關注大冰塊呀，一塊兒和大冰塊學習更多好玩的技術博客吧~

更文挑戰的文章目錄以下：

2021.06.01 《多圖預警！詳細談談Flex佈局的容器元素和項目元素的屬性~》
2021.06.02 《如何把css漸變背景玩出花樣來》
2021.06.03 《如何使用SVG製做沿任意路徑排布的文字效果》
2021.06.04 《3大類15小類前端代碼規範，讓團隊代碼統一規範起來！》
2021.06.05 《團隊管理之git提交規範：你們居然都不會寫commit記錄？｜週末學習》
2021.06.06 《如何控制css鼠標樣式以及擴大鼠標點擊區域｜週末學習》
2021.06.07 《純css實現：仿掘金帳戶密碼登陸時，小熊貓捂眼動做切換的小彩蛋》
2021.06.08 《從11個方面詳細談談原型和原型鏈》
2021.06.09 《深刻談談JavaScript的做用域及做用域鏈》
2021.06.10 《JavaScript中的閉包到底是什麼》
2021.06.11 《純css實現：炫酷的視頻文本蒙版效果》
2021.06.12 《申請一個免費的毒雞湯api，而且用原生JS實現豎行文本的打字機效果》
2021.06.13 《純css實現：多行文本框內的斑馬條紋效果》
2021.06.14 《原生JS實現觸摸滑動監聽事件》
2021.06.15 《原生JS實現鼠標滾輪觸發頁面橫向滾動》
2021.06.16 《原生JS實現跳轉或刷新頁面時，瀏覽器提示當前頁面未保存》
2021.06.17 《原生JS的三大基礎彈框探究》
2021.06.18 《純css實現：固定在頁面底部的按鈕》
2021.06.19 《純css實現：單行文本的打字機動畫效果》
2021.06.20 《純css實現：如何作個完美的平行四邊形》
2021.06.21 《談談基於JS實現阻止別人調試經過控制檯調試網站的問題》
2021.06.22 《純css實現：文字被顏色逐漸填滿的特效》
2021.06.23 《h5實現一個刮刮卡的動畫效果》
2021.06.24 《純css實現：文字可換行的下劃線、波浪線等效果》