用 radial-gradient 实现波浪效果

先上效果图

codepen: https://codepen.io/linghucq1/pen/zQjqZv?editors=1100

简单画一下原理

图中的波浪线 L 就是咱们要的，它是沿着上下两排相切圆的切线画出来的，只要画出 A 段而后重复，就能够获得咱们想要的波浪效果。

首先要解决怎么画圆的问题，这里就要用到 css3 radial-gradient 属性，不了解这个属性的能够看一下mdn或者10个demo示例学会CSS3 radial-gradient径向渐变。咱们这里要作的，就是画出两种颜色的圆并让它们相切。

先搞一个装波浪的框

<div class="wave"></div>
复制代码

.wave {
  height: 100px;
  background-color: blue;
  margin-top: 100px;
}
复制代码

获得一个蓝色的长方形，如今咱们在它的上边缘画一个圆。

.wave {
  height: 100px;
  background-color: blue;
  margin-top: 100px;
  position: relative;
  
  &::before {
    content: '';
    position: absolute;
    height: 100px;
    width: 100%;
    top: -50px;
    background: radial-gradient(50px circle, blue 50px, transparent)
  }
}
复制代码

用 background-size 让它重复

&::before {
    content: '';
    position: absolute;
    height: 100px;
    width: 100%;
    top: -50px;
    background: radial-gradient(50px circle, blue 50px, transparent) repeat-x;
    background-size: 100px;
  }
复制代码

这里已经能够看到雏形了，若是咱们把间隔拉大而后在中间加入白色圆

&::before {
    content: '';
    position: absolute;
    height: 100px;
    width: 100%;
    top: -50px;
    background: radial-gradient(50px circle at 50px 50px, #fff 50px, transparent), radial-gradient(50px circle at 150px 50px, blue 50px, transparent);
    background-size: 200px 100px;
  }
复制代码

一个圆圆的波浪就完成了，如今咱们要作的，就是调整圆的位置。根据开始的手绘图，咱们能够计算出上下圆圆心的水平和垂直距离。其中水平距离为圆的半径 R，垂直距离为 √3R 也就是 1.732R。并且咱们只要画出一个周期的波段（A）而后重复就好了。

&::before {
    @height: 50px * 1.732;
    content: '';
    position: absolute;
    height: 100px;
    width: 100%;
    top: -@height/2;
    background: radial-gradient(50px circle at 0 0, #f0f 50px, transparent), radial-gradient(50px circle at 50px @height, blue 50px, transparent), radial-gradient(50px circle at 100px 0, #f0f 50px, transparent);
    background-size: 100px 100px;
    background-repeat: no-repeat;
  }
复制代码

咱们先把背景重复关掉来看单独的一段长什么样，

这里特地用了一个颜色做为区分，须要注意的是 top 的值为上下圆心垂直距离的一半。

把上面颜色改为白色就是一个波浪效果了。

如今再加一个平移动画和另外一层波浪和半透明，就能够实现最开始的效果。

可是，若是你去尝试把 codepen 代码里面的 wave2 往上移，就会发现这个方案并不完美，目前尚未想到解决方案，不知道各位有什么好点子？

这里顺便安利一个 chrome 插件: web maker，能够实时预览 html css js 编辑效果，还能够在线保存以前的代码，没事的时候就鼓捣鼓捣，很好用。