html5 svg线性波浪背景动画特效

js代码

<script type="text/javascript" src='js/TweenMax.min.js'></script>
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src='js/wavify.js'></script>
<script type="text/javascript" src='js/jquery.wavify.js'></script>
<script type="text/javascript">
		var wave1 = $('#feel-the-wave').wavify({
		  height: 80,
		  bones: 4,
		  amplitude: 60,
		  color: '#B289EF',
		  speed: .15
		});

		var wave2 = $('#feel-the-wave-two').wavify({
		  height: 60,
		  bones: 3,
		  amplitude: 40,
		  color: 'rgba(150, 97, 255, .8)',
		  speed: .25
		});

		$("[data-pause]").on('click', function(){
		  wave1.pause();
		  wave2.pause();
		  return false;
		});

		$("[data-play]").on('click', function(){
		  wave1.play();
		  wave2.play();
		  return false;
		});
</script>