【CSS】【笔记】控制文字不停变换颜色

datawind

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

color: transparent;

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

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

[gif下载,解压密码:52pojie]

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

 -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那么复杂了,哈哈哈

layuai

很有创意的想法

52weiv

放弃了。 效果是有的，但是评论里面不能使用样式。

datawind

mokson 发表于 2021-11-13 14:07
这样的话，网页文件的大小变得很大呀。

这个可以存放到图片网盘的,我给你一个链接吧
https://z3.ax1x.com/2021/10/05/4XjMCQ.gif

datawind

52weiv 发表于 2021-11-13 15:22
放弃了。 效果是有的，但是评论里面不能使用样式。

哈哈,插个眼说不定就用上了

datawind

感谢大家的回复吧,作为一个刚入圈子的新人发布的一个帖子能得到这么点关注也是给我添加的了动力,以后会越加努力的!~

mylo

挺不错的想法