阅读 2185

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

运行看一下:

GIF 2021-6-22 23-14-51.gif

完美运行,不需要给伪元素设置什么宽高,也不需要设置什么overflow: hidden;,只需要一个简单的禁止换行,搞定!

后记

希望大冰块今天分享的内容能对你有所帮助,通过以上代码可以实现文字逐渐被填满的特效,实际场景的应用也可以改成竖版的,在首屏或者loading的时候都能够用得到,还是很好玩很炫酷很有意思的~

今天是我坚持日更的第二十二天,今天加了班,回家之后收拾一下还没想好写什么,可能大家都一样,打工人的艰辛都大同小异吧~

每天输出一点点,进步一点点。有志者,事竟成。大家一起加油呀~

如果本文对你有帮助,关注大冰块,点个赞吧~

更文挑战的文章目录如下:

文章分类
前端
文章标签