Html
    Css
    Js


body {
	background-color:#EBEBEB
}
.colorblock1 {
	width:300px;
	height:100px;
	margin:20px auto;
	background-image:-webkit-linear-gradient(left,red,blue);
	/* Safari 5.1 - 6.0 */
        background-image:-o-linear-gradient(right,red,blue);
	/* Opera 11.1 - 12.0 */
        background-image:-moz-linear-gradient(right,red,blue);
	/* Firefox 3.6 - 15 */
        background-image:linear-gradient(to right,red,blue);
	/* 标准的语法(必须放在最后) */
}
.colorblock2 {
	width:300px;
	height:100px;
	margin:20px auto;
	background-image:linear-gradient(red 0%,red 25%,yellow 25%,yellow 50%,blue 50%,blue 75%,green 75%,green 100%);
}
.moveblock {
	width:50px;
	height:400px;
	margin:0 auto;
	background-size:60px 60px;
	background-image:linear-gradient(135deg,red 0%,red 25%,white 25%,white 50%,red 50%,red 75%,white 75%,white 100%);
	animation:move 1s linear infinite;
}
@keyframes move {
	0% {
	}100% {
	background-position:60px 0;
}
}

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

CSS3颜色渐变动画

0