純CSS 實現波浪移動效果

在某些頁面上常常看到波浪的效果,雖然只有裝飾的作用,但是卻讓頁面看上去更生動了,同時某些情況下也能起到進度條的作用,而波浪的形式卻比普通進度條更美觀有趣。

如果想要實現波浪的效果,作者想到的第一個方法是通過 canvas 繪製波浪,然後用幀動畫讓波浪運動起來。這種方式實現的波浪效果應該是最好的,能夠實現很多細節,比如控制波峰的高度、改變波浪的數量、根據前一個波浪的高度計算後一個波浪的高度等等。

但是往往需求並不會這麼複雜,產品經理和設計想要的只是一個看上去還比較美觀的波浪效果而已。如果用 canvas 去做,就實在是大材小用了,耗時耗力。所以這種情況下,就可以嘗試使用 css 來完成這個小需求。

分析波浪效果

上面是作者完成的波浪效果的其中一種(不會做 gif,就用多張圖片拼貼在一起代替吧),它有兩個波峰,這兩個波峰動起來時,會有一種向右推進的效果。我們先一個一個來看,如果要實現一個波峰,我們應該怎麼做?

波峰具有弧度,在 css 中能夠實現弧度效果的是border-radius這個屬性;而對於向右推進的效果,單個來看的話,其實可以理解為是旋轉動畫,我們可以通過animation來實現。

// htmln<div class="wave"></div>nn// stylen.wave {n width: 300px;n height: 300px;n border-radius: 50%;n background: blue;n}n

上面代碼中的.wave在頁面上的顯示效果是一個圓形。雖然還沒有添加動畫,但是我們已經可以預想到,即使旋轉起來,我們視覺上看來並沒有在運動。這要怎麼解決呢?其實很簡單,只要讓每一個角的弧度都不同就行了。同時,讓寬高不同,可以使繪製出來的效果更好。

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

然後通過動畫使這個不規則的形狀動起來。

.wave {n width: 250px;n height: 300px;n border-top-right-radius: 150px;n border-top-left-radius: 150px;n border-bottom-right-radius: 150px;n border-bottom-left-radius: 140px;n background: #adcbfe;n animation: wave 4s linear infinite;n}nn@keyframes wave {n 0% {transform: rotate(0deg);}n 100% {transform: rotate(360deg);}n}n

關於 css 動畫的使用,可以參考之前的一篇文章:

君未來我已老:純CSS實現輪播圖效果zhuanlan.zhihu.com圖標

到這裡,一個波浪的實現就完成了。第二個波浪的實現步驟和第一個是相同的,但是可以對width height border-radius animation 這些屬性進行修改,使兩個波浪的運動節奏不同,有快有慢有高有低,這樣波浪的效果就會更真實。

想要看源碼的小夥伴可以戳下面這個鏈接:

TroyXL/Front-endgithub.com圖標

關注微信公眾號【前端程序員的斜杠青年進化錄】(微信搜索 weekly-front-end),感謝你的支持!

推薦閱讀:

Vue2用什麼UI 框架呢bootstrap 好像不好用了
奇舞周刊第 242 期:未來的前端工程師
【 js 基礎 】 setTimeout(fn, 0) 的作用
哪些JS框架和庫最有發展前途?
css3怎麼實現高度從固定到自動的過渡動畫?

TAG:前端工程师 | CSS | HTMLCSS |