前言：

现在的CSS功能已经很强大，很多以前需要用js才能实现的动画效果，如今用纯CSS就可以实现了，比如如下的波浪动画效果，你只要几行CSS代码就可以轻松实现了。

先看效果图：

实现代码

1.Html代码

<div class="wave"></div>

.wave {
	width:400px;
	height:200px;
	outline:2px solid rgba(128,128,128,0.521);
	--c:#2196F3;
	--w1:radial-gradient(100% 57% at top,#0000 100%,var(--c) 100.5%) no-repeat;
	--w2:radial-gradient(100% 57% at bottom,var(--c) 100%,#0000 100.5%) no-repeat;
	background:var(--w1),var(--w2),var(--w1),var(--w2);
	background-position-x:-200%,-100%,0%,100%;
	background-position-y:100%;
	background-size:50.5% 100%;
	animation:m 1s infinite linear;
}
@keyframes m {
	0% {
	background-position-x:-200%,-100%,0%,100%
}
100% {
	background-position-x:0%,100%,200%,300%
}
}

总结

以上就是纯CSS实现的波浪动画效果，是不是很简单？快来自己动手实现一下吧。