點擊上方藍字關注「小鄭搞碼事」，每天都能學到知識，搞懂一個問題！

這個是在2015年接了一個H5需求的時候，用CSS實現的一個效果，今天，這裡專門說一下它的實現原理及製作過程~~~~~~

實現一個波浪圖效果，也就是說需要畫一個貝塞爾曲線，通常想到的是用SVG可以畫，還有我們最為熟悉的canvas，利用路徑繪製出三次貝塞爾曲線並賦予動畫效果也可以實現。然而，在大多數的產場景下，其實我們只需利用CSS就能模擬波浪效果。下面我們一步步來看。

一、簡單說一下原理

首先，我們將一個正方形的的border-readius設置成50%，就是得到一個圓形，如下圖所示：

效果圖是這樣的：

沒錯，當我把border-radus設置成45%時，也就是接近50%的任意值時，就會出現大概下面這樣的圖形，看起來像「金輪法王」的某樣武器，哈哈

現在我們給這個像武器的圖形加一個動畫樣式：

現在我們看到的效果是這樣的：

這樣一來，就出現了一個類似波浪的起伏效果，下面我們就藉助動態變換的起伏動畫，模擬製造出類似波浪的效果。

二、更實際的例子

假如我們現在要實現下面這個波浪的效果圖。

用兩個DIV就可以做到了，DOM結構這麼寫：

主要是在div.wave元素上加兩個偽元素（before和after）的樣式，分別設置border-radius為45%和47%。然後在給這兩個偽元素添加動畫，就有了上面這個波浪圖的效果。代碼是這樣的：

相比於SVG和canvas效果差了一點點，但是相對來說，這種樣式的模擬實現方式使用的場景更多，且學習成本更低！

總結：

單純的將一個border-radius接近50%的橢圓形旋轉，動畫效果可能不是那麼特別好。這時我們可以給它添加一些其它的變換因素，使其看起來更真實。比如：

1、可以在動畫的過程中，動態改變border-radius的值。

2、可以在動畫的過程中，使用transform產生輕微的位移。

3、可以使用多個橢圓按層級添加同時轉，且設置一點透明度等。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！