纯css实现：文字被颜色逐渐填满的特效-一一网

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

前言

啊不知不觉又到深夜了，有句话说：时间就像胸，挤挤就有了，躺下就没了。趁着还没躺下，赶紧把今天的更文给搞定~

今天主要是想分享一个纯css实现的文字被颜色逐渐填满变化的效果，这个一个很炫酷的效果，如上面的封面图所示，之前曾经用在项目中，实现起来却只需要简单的几个属性就可以完成。

思路

既然要实现这样一个效果，我们就要先进行效果的拆分：

这个效果就可以拆分为两个盒子，灰色的文本盒子，渐变蓝色文本盒子。
两个盒子完全重叠，渐变蓝色文本盒子在上，灰色文本盒子在下。
上面蓝色文本的盒子逐渐展示，下面灰色文本盒子逐渐被覆盖，效果即完成.
考虑到DOM元素越多越乱的情况，上面的蓝色文本盒子用伪元素::after实现最方便。

实现过程

思路有了，剩下的就是把思路转换为代码啦，我按着上面的思路，三下五除二实现了如下代码：

    <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>
复制代码

运行一下：效果如下所示：

GIF 2021-6-22 23-03-09.gif

咦？？？怎么和预想的不一样啊，虽然最后完全把灰色文本给覆盖了，但是蓝色文本宽度不够的时候，被挤到了下面，然后随着宽度的增加又一个字一个字蹦蹦跳跳覆盖的，不对劲呢~

这时候我想，这是个小问题，加个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>
复制代码

再运行一下：效果如下所示：

GIF 2021-6-22 23-12-06.gif

还是没有任何变化啊喂！

这是因为我并没有对伪元素限制宽高，所以文字并没有超出该伪元素的内容区域，所以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>
复制代码