css实现文字渐变效果

重要属性：
-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>

效果图如下：