用 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 編輯效果，還能夠在線保存以前的代碼，沒事的時候就鼓搗鼓搗，很好用。