文章同步更新在 CodeFictionist

今天這篇我其實也是來當學生的 XD
今天這個波浪效果，過去我在一位前端前輩的作品集上看過，那時就很想試試，但一直沒有付諸行動，這次趁著鐵人賽的機會來嘗試學一下波浪效果。
不過說實在的，我原本以為會是單純用 HTML 跟 CSS 來做，但找到的普遍做法都是用一個有高低起伏的波浪 svg 圖片，搭配 animation 讓它無限向左移動來製造波浪移動起伏的感覺。Well，著實料想不到。

這次的 code 與 svg 來源都來自 使用 CSS 與 SVG 製作波浪動畫。
對了，先在這裡提供兩個 svg 相關的網站，本來我是想用自己產生的 svg 的，但那個左右對稱感沒有上面這篇文章中的好看，所以後來就直接用了，但我還是給一下我產生自己 svg 的網站：

• Svg Wave：產生 svg 波浪圖片。
• URL-encoder for SVG：將 svg 圖片轉換成 URL。

波浪效果

來看一下 code：

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

.ocean {
 height: 80px;
 width: 100%;
 position: absolute;
 left: 0px;
 bottom: 0px;
 width: 100%;
 overflow-x: hidden;
}

.wave {
 background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 88.7'%3E%3Cpath d='M800 56.9c-155.5 0-204.9-50-405.5-49.9-200 0-250 49.9-394.5 49.9v31.8h800v-.2-31.6z' fill='%23003F7C'/%3E%3C/svg%3E");
 position: absolute;
 width: 200%;
 height: 100%;
 animation: wave 10s -3s linear infinite;
 transform: translate3d(0, 0, 0);
 opacity: 0.8;
}

@keyframes wave {
 0% {
  transform: translateX(0);
 }
 50% {
  transform: translateX(-25%);
 }
 100% {
  transform: translateX(-50%);
 }
}

範例 - 波浪效果

不要看上面的 code 好像沒什麼，隨便拿掉一個都會出事，我寫一下我自己寫時採過哪些雷：

1. .ocean 沒設 position: absolute;，然後你就會發現波浪變好幾個。
2. .ocean 高度設 100%，波浪也變好幾個。
3. .wave 沒設定 position: absolute;，波浪以另外一種形式出現好幾個 (吐血)。

下面就展示最常出現的波浪變好幾個到底是指什麼齁：

所以後來我就知道了，最簡單的竟然是那個向左邊位移的動畫 (掩面)。
大家不要再踩我的坑了 www

Reference

1. 使用 CSS 與 SVG 製作波浪動畫