css实现文字渐变效果

重要属性：
-webkit-background-clip: text;
使用了这个属性的意思是，以区块内的文字作为裁剪区域向外裁剪，文字的背景即为区块的背景，文字之外的区域都将被裁剪掉。用渐变背景作为颜色填充文本

text-fill-color;
文本填充颜色,不过它实际也是设置对象中文字的填充颜色，和color的效果很相似。如果同时设置text-fill-color和color两个属性，
text-fill-color会覆盖掉color的值。

	
	 
渐变色文本 Hello

效果图：

实现动画效果：

<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>

效果图如下：