Html
    Css
    Js

    
                        
* {
	margin:0;
	padding:0;
	font-family:"Microsoft YaHei","Lucida Sans Unicode","Myriad Pro","Hiragino Sans GB","Heiti SC"
}
.grayPage {
	background-color:#f5f5f5;
}
/*波浪线效果  start*/
			
			.editorial {
	display:block;
	width:100%;
	min-width:1200px;
	height:480px;
}
.parallax>use {
	animation:move-forever 12s linear infinite;
	/*transform-origin:50% 50%;
	*/
}
.parallax>use:nth-child(1) {
	animation-delay:-2s;
}
.parallax>use:nth-child(2) {
	animation-delay:-2s;
	animation-duration:8s;
}
.parallax>use:nth-child(3) {
	animation-delay:-4s;
	animation-duration:9s;
}
.parallax>use:nth-child(4) {
	animation-delay:-6s;
	animation-duration:13s;
}
.parallax>use:nth-child(5) {
	animation-delay:0;
	animation-duration:9s;
}
.parallax>use:nth-child(6) {
	animation-delay:-6s;
	animation-duration:11s;
}
@keyframes move-forever {
	0% {
	transform:translate(-90px,0%);
}
100% {
	transform:translate(85px,0%);
}
}/*波浪线效果  end*/

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

滚动的波浪线效果

0