純css實現：文字被顏色逐漸填滿的特效

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

前言

啊不知不覺又到深夜了，有句話說：時間就像胸，擠擠就有了，躺下就沒了。趁着還沒躺下，趕忙把今天的更文給搞定~html

今天主要是想分享一個純css實現的文字被顏色逐漸填滿變化的效果，這個一個很炫酷的效果，如上面的封面圖所示，以前曾經用在項目中，實現起來卻只須要簡單的幾個屬性就能夠完成。前端

思路

既然要實現這樣一個效果，咱們就要先進行效果的拆分：git

這個效果就能夠拆分爲兩個盒子，灰色的文本盒子，漸變藍色文本盒子。web
兩個盒子徹底重疊，漸變藍色文本盒子在上，灰色文本盒子在下。api
上面藍色文本的盒子逐漸展現，下面灰色文本盒子逐漸被覆蓋，效果即完成.瀏覽器
考慮到DOM元素越多越亂的狀況，上面的藍色文本盒子用僞元素::after實現最方便。markdown

實現過程

思路有了，剩下的就是把思路轉換爲代碼啦，我按着上面的思路，三下五除二實現了以下代碼：閉包

<style> h1{ position: relative; font-size: 72px; font-weight: 700; color: #ccc; } h1::after{ content: attr(text-data); position: absolute; top: 0; left: 0; background: linear-gradient(to right, #ABDCFF, #0396FF); -webkit-background-clip: text; color: transparent; animation: changeColor 6s linear infinite; } @keyframes changeColor{ 0%{ width: 0%; } 100%{ width: 100%; } } </style>


    <h1 text-data="你好哇，我是南極大冰塊~">你好哇，我是南極大冰塊~</h1>
複製代碼

運行一下：效果以下所示：svg

咦？？？怎麼和預想的不同啊，雖然最後徹底把灰色文本給覆蓋了，可是藍色文本寬度不夠的時候，被擠到了下面，而後隨着寬度的增長又一個字一個字蹦蹦跳跳覆蓋的，不對勁呢~

這時候我想，這是個小問題，加個overflow: hidden;就行了，因而我改了代碼：

<style> h1{ position: relative; font-size: 72px; font-weight: 700; color: #ccc; } h1::after{ content: attr(text-data); overflow: hidden; /* 加了這行代碼 */ position: absolute; top: 0; left: 0; background: linear-gradient(to right, #ABDCFF, #0396FF); -webkit-background-clip: text; color: transparent; animation: changeColor 6s linear infinite; } @keyframes changeColor{ 0%{ width: 0%; } 100%{ width: 100%; } } </style>


    <h1 text-data="你好哇，我是南極大冰塊~">你好哇，我是南極大冰塊~</h1>
複製代碼

再運行一下：效果以下所示：

仍是沒有任何變化啊喂！

這是由於我並無對僞元素限制寬高，因此文字並無超出該僞元素的內容區域，因此overflow: hidden;看起來就像沒有生效同樣，實際上它生效了，只是沒有效果罷了。

那麼，真正的問題出在哪裏呢？？？

答案是：文字的換行問題！

衆所周知，文字在不應換行的時候換行，就會出現奇怪的問題~ 因而我改了代碼以下：

<style> h1{ position: relative; font-size: 72px; font-weight: 700; color: #ccc; } h1::after{ content: attr(text-data); white-space: nowrap; /* 加了這行代碼，禁止文字換行 */ position: absolute; top: 0; left: 0; background: linear-gradient(to right, #ABDCFF, #0396FF); -webkit-background-clip: text; color: transparent; animation: changeColor 6s linear infinite; } @keyframes changeColor{ 0%{ width: 0%; } 100%{ width: 100%; } } </style>


    <h1 text-data="你好哇，我是南極大冰塊~">你好哇，我是南極大冰塊~</h1>
複製代碼

運行看一下：

完美運行，不須要給僞元素設置什麼寬高，也不須要設置什麼overflow: hidden;，只須要一個簡單的禁止換行，搞定！

後記

但願大冰塊今天分享的內容能對你有所幫助，經過以上代碼能夠實現文字逐漸被填滿的特效，實際場景的應用也能夠改爲豎版的，在首屏或者loading的時候都可以用獲得，仍是很好玩很炫酷頗有意思的~

今天是我堅持日更的第二十二天，今天加了班，回家以後收拾一下還沒想好寫什麼，可能你們都同樣，打工人的艱辛都大同小異吧~

天天輸出一點點，進步一點點。有志者，事竟成。你們一塊兒加油呀~

若是本文對你有幫助，關注大冰塊，點個贊吧~

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

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實現阻止別人調試經過控制檯調試網站的問題》