使用css3 animation动画属性,制作简单的svg元素动画,白色层叠的波浪动画效果,自适应手机端和pc网页展示。这是一款简洁大气的适用于网页底部导航的波浪滚动网页动画背景特效。

蓝色渐变背景和白色波浪动画结合很有层次感,样式表写的不错值得收藏。

背景样式表属性参考:

background: linear-gradient(60deg, rgba(84,58,183,1) 0%, rgba(0,172,193,1) 100%);

使用介绍:

<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" />
	</defs>
	<g class="parallax">
		<use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.7" />
		<use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.5)" />
		<use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.3)" />
		<use xlink:href="#gentle-wave" x="48" y="7" fill="#fff" />
	</g>
</svg>

复制svg这部分代码和style.css文件引入,放在网页底部波浪动画效果。