重要属性:
-webkit-background-clip: text;
使用了这个属性的意思是,以区块内的文字作为裁剪区域向外裁剪,文字的背景即为区块的背景,文字之外的区域都将被裁剪掉。用渐变背景作为颜色填充文本
text-fill-color;
文本填充颜色,不过它实际也是设置对象中文字的填充颜色,和color的效果很相似。如果同时设置text-fill-color和color两个属性,
text-fill-color会覆盖掉color的值。
<style>
.textGradient {
font-size: 30px;
font-weight: bold;
background: linear-gradient(to right, #40e0d0, #ff8c00, #ff0080);
background-size: cover;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
display: inline-block; /*重要属性,如果不写,渐变色效果有明显的区别,针对块级元素*/
}
</style>
<p class="textGradient">渐变色文本 Hello</p>
效果图:
实现动画效果:
<style>
p{
font-size: 40px;
font-weight: bolder;
-webkit-text-fill-color: transparent;
background-image: -webkit-linear-gradient(left,#129835,#ece648 25%,#129835 50%,#F9E92B 75%,rgb(40, 150, 38));
background-size: 200%,100%;
-webkit-background-clip: text;
-webkit-animation: word 5s linear infinite ;
display: inline-block;
}
@keyframes word {
0%{background-position: 0 0}
100%{background-position: -100% 0}
}
</style>
<p>佩奇公主</p>
效果图如下: