CSS3 svg绘制的HTML网页底部多重波浪循环起伏的好看动画背景特效

源码简介

这是CSS3 SVG绘制一款简单好看的HTML网页底部波浪动画背景特效，波浪起伏动画效果。

源码Demo

点我查看演示页面

<link rel="stylesheet" href="style.CSS">

	<div>
		<SVG class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
			<defs>
				<path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"></path>
			</defs>
			<g class="parallax">
				<use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.7"></use>
				<use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.5)"></use>
				<use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.3)"></use>
				<use xlink:href="#gentle-wave" x="48" y="7" fill="#fff"></use>
			</g>
		</svg>
	</div>

源码下载