CSS實現波浪移動

這次帶給大家CSS實現波浪移動，CSS實現波浪移動的注意事項有哪些，下面就是實戰案例，一起來看一下。

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

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

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

分析波浪效果

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

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

// html
<p class="wave"></p>
// style
.wave {
    width: 300px;
    height: 300px;
    border-raduis: 50%;
    background: blue;
}

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

.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;
}

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

.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);}
}

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

純CSS實現輪播圖效果

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

想要看源碼的小夥伴可以戳下面這個連結：

demo on github

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

重繪與重新排列如何使用

Canvas製作旋轉太極的動畫

以上是CSS實現波浪移動的詳細內容。更多資訊請關注PHP中文網其他相關文章！