如何用HTML和CSS写一个彩色渐变动态文字样式

😉 阿里云幸运红包,戳我领取

详解样式

<!---首先,我们先打出文字,给他一个样式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元/篇奖励。(重复内容无奖励)
© 版权声明
THE END
喜欢本站内容,请点【分享】【赞】和【收藏】
点赞14打赏 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容