iT邦幫忙

2024 iThome 鐵人賽

DAY 23
0

文章同步更新在 CodeFictionist

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

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

波浪效果

來看一下 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;,波浪以另外一種形式出現好幾個 (吐血)。

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

wrong wave

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

Reference

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

上一篇
Day 22 - 粒子浮動效果
下一篇
Day 24 - 按鈕彈跳效果
系列文
一天一項 CSS 小技巧:打造視覺與互動效果30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言