效果如本页所示

最近本人在学习前端技术,因为对CSS特别感兴趣,所以研究了一下,如何变换字体颜色,我在百度上发现了许多都是JS来控制颜色变换的,这种比较麻烦,所以我在学习CSS的过程中学到了

color: transparent;

这个函数是使颜色变成透明的,所以我们可以利用这个函数把文字变成透明的文字,然后给他设置一个背景

background-image: url(颜色变换的.gif);

背景图（文件大小1.95Mb，可以下载到本地使用，嫌太大也可以上传图床调用）：

• https://s4.ax1x.com/2022/03/05/b0dPwn.gif
• https://z3.ax1x.com/2021/10/05/4XjMCQ.gif

如果你这样写的话,发现背景是填充了,整个一行,而不是文字,那么就需要下面这个

-webkit-background-clip: text;

作用在文字上,看见前面的-webkit就知道这个不是所有浏览器都能适应了哈哈,但如果你这个css是使用VScode编辑的,你就会发现跟我一样的情况,弹出来黄色警告,如果你觉得看起来不舒服的话可以再下面添加一行

background-clip: text;

那么总结一下全部代码

color: transparent;//使字体颜色透明
background-image: url(颜色.gif);//赋予背景
-webkit-background-clip: text; //作用到文字上
background-clip: text;

这样,一个只用css的不停变换文字颜色的效果就成功了!不用像JS那么复杂了

<style>
p{
    color: transparent;
    background-image: url(//s4.ax1x.com/2022/03/05/b0dPwn.gif);
    -webkit-background-clip: text;
    background-clip: text;
}
</style>

来源52pojie