在某些頁面上常?？吹讲ɡ说男Ч?，雖然只有裝飾的作用，但是卻讓頁面看上去更生動了，同時(shí)某些情況下也能起到進(jìn)度條的作用，而波浪的形式卻比普通進(jìn)度條更美觀有趣。

如果想要實(shí)現(xiàn)波浪的效果，作者想到的第一個(gè)方法是通過 canvas 繪制波浪，然后用幀動畫讓波浪運(yùn)動起來。這種方式實(shí)現(xiàn)的波浪效果應(yīng)該是最好的，能夠?qū)崿F(xiàn)很多細(xì)節(jié)，比如控制波峰的高度、改變波浪的數(shù)量、根據(jù)前一個(gè)波浪的高度計(jì)算后一個(gè)波浪的高度等等。

但是往往需求并不會這么復(fù)雜，產(chǎn)品經(jīng)理和設(shè)計(jì)想要的只是一個(gè)看上去還比較美觀的波浪效果而已。如果用 canvas 去做，就實(shí)在是大材小用了，耗時(shí)耗力。所以這種情況下，就可以嘗試使用 css 來完成這個(gè)小需求。

分析波浪效果

上面是作者完成的波浪效果的其中一種（不會做 gif，就用多張圖片拼貼在一起代替吧），它有兩個(gè)波峰，這兩個(gè)波峰動起來時(shí)，會有一種向右推進(jìn)的效果。我們先一個(gè)一個(gè)來看，如果要實(shí)現(xiàn)一個(gè)波峰，我們應(yīng)該怎么做？

波峰具有弧度，在 css 中能夠?qū)崿F(xiàn)弧度效果的是border-raduis這個(gè)屬性；而對于向右推進(jìn)的效果，單個(gè)來看的話，其實(shí)可以理解為是旋轉(zhuǎn)動畫，我們可以通過animation來實(shí)現(xiàn)。

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

// style
.wave {
    width: 300px;
    height: 300px;
    border-raduis: 50%;
    background: blue;
}

上面代碼中的.wave在頁面上的顯示效果是一個(gè)圓形。雖然還沒有添加動畫，但是我們已經(jīng)可以預(yù)想到，即使旋轉(zhuǎn)起來，我們視覺上看來并沒有在運(yùn)動。這要怎么解決呢？其實(shí)很簡單，只要讓每一個(gè)角的弧度都不同就行了。同時(shí)，讓寬高不同，可以使繪制出來的效果更好。

.wave {
    width: 250px;
    height: 300px;
    border-top-right-radius: 150px;
    border-top-left-radius: 150px;
    border-bottom-right-radius: 150px;
    border-bottom-left-radius: 140px;
    background: #adcbfe;
}

然后通過動畫使這個(gè)不規(guī)則的形狀動起來。

.wave {
    width: 250px;
    height: 300px;
    border-top-right-radius: 150px;
    border-top-left-radius: 150px;
    border-bottom-right-radius: 150px;
    border-bottom-left-radius: 140px;
    background: #adcbfe;
    animation: wave 4s linear infinite;
}

@keyframes wave {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}

關(guān)于 css 動畫的使用，可以參考之前的一篇文章：

純CSS實(shí)現(xiàn)輪播圖效果

到這里，一個(gè)波浪的實(shí)現(xiàn)就完成了。第二個(gè)波浪的實(shí)現(xiàn)步驟和第一個(gè)是相同的，但是可以對width height border-raduis animation 這些屬性進(jìn)行修改，使兩個(gè)波浪的運(yùn)動節(jié)奏不同，有快有慢有高有低，這樣波浪的效果就會更真實(shí)。

想要看源碼的小伙伴可以戳下面這個(gè)鏈接：

demo on github

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評論