用 radial-gradient 实现波浪效果

[linghucq1]

先上效果图

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 编辑效果，还可以在线保存之前的代码，没事的时候就鼓捣鼓捣，很好用。