如何用HTML和CSS写一个彩色渐变动态文字样式-懒人Blog(资源素材网)

详解样式

<!---首先，我们先打出文字，给他一个样式gc（Gradual change首字母，可以随意）-->
<dic class="gc">懒人素材，一个有价值的资源网</div>

首先打出文字，给一个样式，GC。
下面详解css样,这里要用到：linear-gradient(background背景颜色颜色)，@keyframes（@keyframes规则），animation（css动画）

.gc{
/*设置背景颜色
详解：
background背景颜色
linear-gradient渐变颜色
渐变颜色的to right是从左往右，red包括后面的是颜色
*/
background: linear-gradient(to right, red, orange, yellow, green, yellow, orange, red, orange, yellow, green, yellow, orange, red);

/*文字颜色设置为透明*/
color: transparent;

/*这里你可以理解为文字显示背景*/
-webkit-background-clip: text;

/*设置一个固定宽，如果你不想颜色滚动，就可以不用设置，也用不到@keyframes和animation*/
width: 300px;

/*设置动画，绑定@keyframes
详解：move为@keyframes设置的名称  5s是时间  infinite无限重复
*/
animation: move 5s infinite; 
}

/*设置@keyframes  相对的名字move要与animation绑定的一致，否则无效*/
@keyframes move {
      0% {background-position: 0 0;}
      100% {
        /*宽度固定，如果为百分比背景不会滚动*/
        background-position: -300px 0;
      }
}

直接代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>如何用HTML和CSS写一个彩色渐变动态文字样式丨懒人资源</title>
<style>
.gc{
background: linear-gradient(to right, red, orange, yellow, green, yellow, orange, red, orange, yellow, green, yellow, orange, red);
color: transparent;
-webkit-background-clip: text;
width: 300px;
animation: move 5s infinite; 
}
@keyframes move {
      0% {background-position: 0 0;}
      100% {
        background-position: -300px 0;
      }
}
</style>
</head>

<body>
<dic class="gc">懒人资源，一个有价值的资源网</div>
</body>
</html>

好了，就先说到这里。
难点解答：-webkit-background-clip: text;
background-clip ，可能很多朋友都很陌生。Clip 的意思为修剪，那么从字面意思上理解，background-clip 的意思即是背景裁剪。
这里不多讲，我们主要讲 background-clip: text; ，因为现在只有 chrome 支持这个，所以通常想使用它，需要 -webkit-background-clip:text;。

什么是background-clip: text;
使用了这个属性的意思是，以区块内的文字作为裁剪区域向外裁剪，文字的背景即为区块的背景，文字之外的区域都将被裁剪掉。

自己可以尝试加了background-clip: text;和不加background-clip: text;的区别
记得支持chrome不要忘了前面加个-webkit-

🎉 恭喜你发现了宝藏！>>点此前往<<

👋 感谢您的观看，对您有用就分享出去吧！

如您有好的资源/素材，可参与创作者激励计划享投稿分成。分成介绍
投稿成功收录，即可获得 1-10元/篇奖励。（重复内容无奖励）

本站代码模板仅供学习交流使用请勿商业运营,严禁从事违法,侵权等任何非法活动,否则后果自负！

1 如果您喜欢本站,点击这儿赞助下本站，感谢支持！
2 可能会帮助到你：下载帮助 | 报毒说明 | 进站必看 | 广告合作；
3 本站内容观点不代表本站立场，并不代表本站赞同其观点和对其真实性负责；
4 本站所有内容均来源于网络，仅供学习与参考，请勿商业运营，严禁从事违法，侵权等任何非法活动，否则后果自负；
5 若作商业用途，请联系原作者授权，若本站侵犯了您的权益请联系站长进行删除处理；
6 如若转载，请注明文章出处：

THE END