svg 特效

波浪线效果

by Robbie Yang

HTML

<div class="relative grayPage">
    <svg class="editorial" viewBox="0 24 150 28" preserveAspectRatio="none">
				<defs>
					<path id="gentle-wave" d="m -160,44.4 c 30,0 58,-18 87.7,-18 30.3,0 58.3,18 87.3,18 30,0 58,-18 88,-18 30,0 58,18 88,18 l 0,34.5 -351,0 z"></path>
				</defs>
				<g class="parallax">
					<use xlink:href="#gentle-wave" x="50" y="0" fill="rgba(255,255,255,0)" stroke="#f57d9c" stroke-width=".05"></use>
				</g>
			</svg>
</div>

CSS

* {
	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 4s 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*/