background-clip 实现字体渐变效果

@-webkit-keyframes loop{
0%{background-position: -800px 0;}
100%{background-position: -0 0;}
}
.text2{
width: 800px;
height: 78px;
line-height: 78px;
font-size: 40px;
font-family: '微软雅黑';
font-weight: bold;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-color: red;
background-image:url(bg.jpg);
background-repeat:no-repeat;
background-position: -800px 0;
-webkit-animation:loop 10s linear infinite;
}

background:linear-gradient(to right, red, green);
-webkit-background-clip: text;
color: transparent;