Html
    Css
    Js

    
                        
 .box {
	width:300px;
	height:300px;
	margin:50px auto;
	background-image:linear-gradient(
                    /*45deg,*/
                    yellow,yellow 35%,red  35%,red 65%,blue 65%,blue 100%
                )
}
.inner {
	width:1000px;
	height:100px;
	margin:50px auto;
	background-image:linear-gradient(
                135deg,blue 0%,blue 25%,red  25%,red 50%,blue 50%,blue 75%,red 75%,red 100%
            );
	background-size:60px 60px;
	animation:run 1s linear infinite;
}
@keyframes run {
	0% {
	}100% {
	background-position:120px 0;
}
}

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

css3线性渐变

0