css掩人耳目式海浪动效，这可能是最简单得实现方式了吧？

01

效果图

02

拆解

首先画一个简单的盒子:

利用::before与::after画两个圆角值（radius）不同的不规则圆形:

父元素设置overflow: hidden

最后加上animation动画让两个不规则圆形旋转起来即可?

03

代码

布局很简单，单标签实现

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

这里用的是scss预处理器

.wave {
 position: relative;
 width: 150px;
 height: 150px;
 background-color: #5291e0;
 overflow: hidden;

 // 两个不规则圆形（相对盒子进行定位，距离底部距离则为波浪高度）
 &::before,
 &::after {
   content: "";
   position: absolute;
   left: 50%;
   bottom: 15%;
   width: 500%;
  height: 500%;
   border-radius: 45%;
   background-color: #fff;
   transform: translateX(-50%); // 居中
   animation: rotate 15s linear infinite;
 }
 
 // 其中一个不规则圆形调整一下样式，以便区分（或者调整animation的参数来区分）
 &::before {
   bottom: 10%;
   opacity: .5;
  border-radius: 47%;
 }
}

}

// 旋转动画

@keyframes rotate {

 from {
   transform: translateX(-50%) rotateZ(0deg);
 }

 to {
   transform: translateX(-50%) rotateZ(360deg);
 }
}

04

总结

效果图第一眼看上去，让"蓝色"部分动起来，真的很难，所以采用逆向思维，直接操控"白色"部分再来个overflow: hidden成功偷梁换柱，舒服得很?

05

最后

本文到此结束，希望以上内容对你有些许帮助，如若喜欢请记得点个在看跟关注?

微信公众号「不会写前端」，将不定时更新最新、实用的前端技巧/技术性文章，欢迎关注 ?