Html
    Css
    Js

    
                        
div {
	width:600px;
	height:300px;
	margin:0 auto;
	margin-top:100px;
	font-size:80px;
	text-align:center;
	background:-webkit-linear-gradient(left,#147B96,#E6D205 25%,#147B96 50%,#E6D205 75%,#147B96);
	color:transparent;
	-webkit-background-clip:text;
	background-size:200% 100%;
	animation:masked-animation 1s infinite linear;
}
@-webkit-keyframes masked-animation {
	0% {
	background-position:0 0;
}
100% {
	background-position:-100% 0;
}
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

文字颜色动态渐变

通过css3的clip裁剪、透明、动画效果实现了文字颜色的动态变化

0