如何用HTML和CSS写一个彩色渐变动态文字样式
::aru:proud:: 今天看到一个文字彩色渐变，思路是挺好的。感觉不错，然后因为直接给出的代码，有些小伙伴可能并不了解，这里详细解释一下，下面我们来看看吧！
先上效果图：
【已经删除】
详解样式
<!---首先，我们先打出文字，给他一个样式gc（Gradual change首字母，可以随意）-->
<dic class="gc">听风博客，一个学习HTML和PHP的优质博客</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">听风博客，一个学习HTML和PHP的优质博客</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-
::paopao:tieba_emotion_36:: 这里就完结了
声明：本站原创文章文字版权归本站所有，转载务必注明作者和出处；本站转载文章仅仅代表原作者观点，不代表本站立场，图文版权归原作者所有。如有侵权，请联系我们删除。