让网页“浪“起来，网页底部好看的波浪代码

随着前端技术的不断发展与进步，界面交互的样式要求和美感也越来越高，很多网页的交互都加上了css3动画,这里作者给大家分享一个前端开发必掌握的一个CSS3波浪效果，赶紧学起来吧，加在自己开发网页的底部，给页面增加一点活泼的气息~

CSS3波浪效果

这是使用 SVG 和 CSS 动画制作的波浪效果，该波浪效果可用于大部分页面的底部，使页面增加一点活泼的气息。

代码如下（示例）：

<!--底部波浪开始-->
<div class="wiiuii_layout">
	<svg class="editorial"
		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="50" y="0" fill="#6a7277"/>
			<use xlink:href="#gentle-wave" x="50" y="3" fill="#3f4549"/>
			<use xlink:href="#gentle-wave" x="50" y="6" fill="#22292d"/>  
		</g>
	</svg>
</div>
<style type='text/css'>
	.parallax > use{animation: move-forever 12s linear infinite;}
	.parallax > use:nth-child(1){animation-delay: -2s;}
	.parallax > use:nth-child(2){animation-delay: -2s; animation-duration: 5s;}
	.parallax > use:nth-child(3){animation-delay: -4s; animation-duration: 3s;}
	@keyframes move-forever{0%{transform: translate(-90px, 0%);} 100%{transform: translate(85px, 0%);}}
	.wiiuii_layout{width: 100%;height: 40px;position: relative;overflow: hidden;z-index: 1;background: var(--footer-bg);}
	.editorial{display: block; width: 100%; height: 40px; margin: 0;}
</style>
<!--底部波浪结束-->

这里通过CSS3的animation动画属性来控制三条线条在不停的来回起伏，形成波浪效果。如果觉得对您有帮助的话，可否给博主一个小小的赞。