iT邦幫忙

2025 iThome 鐵人賽
DAY 19
2
Modern Web

關於那些有趣的 CSS 效果系列 第 19 篇

( Day 19 ) 純 CSS 水波效果 ( 最後有點不純 )

17th鐵人賽 css css教學
245 瀏覽

  • 分享至 

  • xImage
    •  

不知道大家有看過「少林足球」嗎？我最喜歡輕功水上飄六師弟飛到天上頂球下來的那一幕，所以我決定用純 CSS 做出六師弟在水上飄的時候產生的「水波」！只可惜要做出六師弟的樣子真的太費工，以後再說好了 ( 最後的範例有用到 JavaScript 輔助，感覺好像有點不太純... )

純 CSS 水波效果 ( 最後有點不純 )

正文開始

這篇教學會使用 CSS 的裁切路徑 clip-path、背景圖片定位、背景尺寸和 CSS 動畫，只用簡單的 div 架構搭配虛擬元素，就能做出漂亮的水波效果，最後還會搭配 JavaScript，實作點擊圖片就出現水波的有趣特效。

CSS 教學 - CSS 水波效果

水波動畫原理

CSS 水波的架構很簡單，只需要在底圖 div 中增加一層 div 作為「水波層」，水波層中除了元素本身，還有元素的虛擬元素 ::before 和 ::after 共三層，當這三層尺寸略有不同並「由大到小」依序出現，就能產生大小交錯的水波效果，HTML 結構如下：

html >>>>
<div class="bg">             <!-- 底圖 -->
  <div class="wave"></div>   <!-- 水波層，例外搭配這層的虛擬元素 ::before 和 ::after -->
</div>

CSS 教學 - CSS 水波效果 - 水波動畫 HTML 結構

下方範例使用 CSS 的裁切路徑 clip-path、動畫 animation，讓水波的三層結構動起來。

<!-- HTML 程式碼 -->
<div class="bg">
  <div class="wave"></div>
</div>

<!-- CSS 程式碼 -->
<style>
  /* 底圖 */
  .bg{
    position: relative;
    width: 400px;
    height: 300px;
    border: 1px solid #000;
    background: #f55;
    margin: 50px;
  }
  /* 水波層共用設定 */
  .wave, .wave::before, .wave::after {
    position: absolute;      /* 絕對定位 */
    top: 0;
    left: 0;
    width: 100%;             /* 尺寸和底圖相同 */
    height: 100%;
    clip-path: ellipse(0 0 at 200px 150px);  /* 橢圓形裁切 */
  }
  /* 大水波，在水波最下層，最先出現 */
  .wave {
    background: #fc0;
    animation: oxxo 3s;      /* 執行動畫，最先出現 */
  }
  /* 小水波，在水波中層，接著大水波出現 */
  .wave::before {
    content: "";
    z-index: 1;              /* 確保被 ::after 覆蓋 */
    background: #0c0;
    animation: oxxo 3s .2s;  /* 執行動畫，接著大水波出現 */
  }
  /* 底圖，在水波最上層，最後出現 */
  .wave::after {
    content: "";
    z-index: 2;              /* 確保覆蓋小水波 */
    background: #f55;
    animation: oxxo 3s .4s;  /* 執行動畫，最後出現 */
  }
  /* 動畫，讓裁切範圍變到最大 */
  @keyframes oxxo {
    0% {clip-path: ellipse(0 0 at 200px 150px);}
    100% {clip-path: ellipse(400px 400px at 200px 150px);}
  }
</style>

CSS 教學 - CSS 水波效果 - 水波動畫原理

由於上方範例使用 CSS 動畫的「延遲」，所以無法重複播放，如果需要重複不斷播放，要將動畫改成三組不同的動畫影格 keyframes，透過動畫百分比進度控制，下方範例會展示重複無限次播放的程式碼。

<!-- HTML 程式碼 -->
<div class="bg">
  <div class="wave"></div>
</div>

<!-- CSS 程式碼 -->
<style>
  /* 底圖 */
  .bg{
    position: relative;
    width: 400px;
    height: 300px;
    border: 1px solid #000;
    background: #f55;
    margin: 50px;
  }
  /* 水波層共用設定 */
  .wave, .wave::before, .wave::after {
    position: absolute;      /* 絕對定位 */
    top: 0;
    left: 0;
    width: 100%;             /* 尺寸和底圖相同 */
    height: 100%;
    clip-path: ellipse(0 0 at 200px 150px);  /* 橢圓形裁切 */
  }
  /* 大水波，在水波最下層，最先出現 */
  .wave {
    background: #fc0;
    animation: oxxo1 3s infinite;  /* 執行動畫 */
  }
  /* 小水波，在水波中層，接著大水波出現 */
  .wave::before {
    content: "";
    z-index: 1;                    /* 確保被 ::after 覆蓋 */
    background: #0c0;
    animation: oxxo2 3s infinite;   /* 執行動畫 */
  }
  /* 底圖，在水波最上層，最後出現 */
  .wave::after {
    content: "";
    z-index: 2;                    /* 確保覆蓋小水波 */
    background: #f55;
    animation: oxxo3 3s infinite; /* 執行動畫 */
  }
  /* 動畫，讓裁切範圍變到最大，使用進度控制出現時間，分別是 0%、10%、20% */
  @keyframes oxxo1 {
    0% {clip-path: ellipse(0 0 at 200px 150px);}
    80% {clip-path: ellipse(400px 400px at 200px 150px);}
  }
  @keyframes oxxo2 {
    10% {clip-path: ellipse(0 0 at 200px 150px);}
    90% {clip-path: ellipse(400px 400px at 200px 150px);}
  }
  @keyframes oxxo3 {
    20% {clip-path: ellipse(0 0 at 200px 150px);}
    100% {clip-path: ellipse(400px 400px at 200px 150px);}
  }
</style>

CSS 教學 - CSS 水波效果 - 水波動畫原理

水波動畫

延續上方單色水波動畫程式碼，將單色背景改為「背景圖」，運用 background-size 和 background-position 進行背景圖的定位和尺寸設定 ( 注意需要擺在背景圖後方才會生效 )，為了後續方便修改，加入「CSS 變數」進行數值設定，完成後就能產生漂亮的水波動畫 ( 只會執行一次，重新整理網頁後可查看效果 )。

<!-- HTML 程式碼 -->
<div class="bg">
  <div class="wave"></div>
</div>

<!-- CSS 程式碼 -->
<style>
  .bg{
    position: relative;
    width: 400px;
    height: 300px;
    border: 1px solid #000;
    background: url("https://steam.oxxostudio.tw/image/index-css.jpg"); /* 背景圖 */
    background-position: center center; /* 背景圖置中定位 */
    background-size: auto 100%;         /* 背景圖尺寸 */
  }
  .wave, .wave::before, .wave::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: inherit;          /* 繼承父元素背景圖 */
    background-position: inherit; /* 繼承父元素背景圖位置 */
    clip-path: ellipse(0 0 at var(--x) var(--y));  /* 裁切改用 CSS 變數，定義中心點 */
  }
  .wave {
    --w: 400px;                   /* 水波最大寬度 */
    --h: 400px;                   /* 水波最大高度 */
    --x: 200px;                   /* 水波中心點 x */
    --y: 150px;                   /* 水波中心點 y */
    background-size: auto 106%;   /* 大水波尺寸較大 */
    animation: oxxo 3s;
  }
  .wave::before {
    content: "";
    z-index: 1;
    background-size: auto 103%;   /* 小水波尺寸較小，但還是比原圖大 */
    animation: oxxo 3s .2s;
  }
  .wave::after {
    content: "";
    z-index: 2;
    background-size: auto 100%;   /* 和原圖相同尺寸 */
    animation: oxxo 3s .4s;
  }
  /* 動畫全部改用變數 */
  @keyframes oxxo {
    0% {clip-path: ellipse(0 0 at var(--x) var(--y));}
    100% {clip-path: ellipse(var(--w) var(--h) at var(--x) var(--y));}
  }
</style>

CSS 教學 - CSS 水波效果 - 水波動畫

搭配 JavaScript，點擊時出現水波

能夠做出水波後，因為都是採用 CSS 變數的緣故，就能運用 JavaScript 動態修改這些變數，實現「點擊後出現水波」的效果，下方範例延伸上述程式碼，將 HTML 裡的 .wave 層移除，改成點擊後動態加入，加入後將根據點擊的位置設定為水波中心，就能產生水波動畫，此外因為所有位置和尺寸都是動態計算添加，不論換成哪種圖片或改變了尺寸，都可以順利產生水波效果，例如下方範例就使用了兩組背景圖。

<!-- HTML 程式碼 -->
<div class="bg b1"></div>
<div class="bg b2"></div>

<!-- CSS 程式碼 -->
<style>
  .b1 {
    width: 400px;
    height: 300px;
    background: url("https://steam.oxxostudio.tw/image/index-css.jpg");
  }
  .b2 {
    width: 200px;
    height: 200px;
    background: repeating-linear-gradient(
    45deg,
    orange 0%,  orange 5%,
    black 5%, black 10%);
  }
  .bg{
    position: relative;
    border: 1px solid #000;
    background-position: center center;
    background-size: auto 100%;
    margin: 20px;
  }

  .wave, .wave::before, .wave::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: inherit;
    background-position: inherit;
    clip-path: ellipse(0 0 at var(--x) var(--y));
  }
  .wave {
    --w: 400px;
    --h: 400px;
    --x: 200px;
    --y: 150px;
    background-size: auto 106%;
    animation: oxxo 3s;
  }
  .wave::before {
    content: "";
    z-index: 1;
    background-size: auto 103%;
    animation: oxxo 3s .2s;
  }
  .wave::after {
    content: "";
    z-index: 2;
    background-size: auto 100%;
    animation: oxxo 3s .4s;
  }

  @keyframes oxxo {
    0% {clip-path: ellipse(0 0 at var(--x) var(--y));}
    100% {clip-path: ellipse(var(--w) var(--h) at var(--x) var(--y));}
  }
</style>

<!-- JavaScript 程式碼 -->
<script>
  const bg = document.querySelectorAll('.bg');  // 選擇所有 .bg
  bg.forEach(function(item){
    let w = item.offsetWidth;    // 這個 .bg 的寬度
    let h = item.offsetWidth;    // 這個 .bg 的高度
    let ox = item.offsetLeft;    // 這個 .bg 的左上方 x 座標
    let oy = item.offsetTop;     // 這個 .bg 的左上方 y 座標
    item.addEventListener('click', function(e){
      let x = e.pageX - ox;      // 計算滑鼠與座標的相對位置，也就是實際點擊圖片的位置
      let y = e.pageY - oy;      // 計算滑鼠與座標的相對位置，也就是實際點擊圖片的位置
      let wave = document.createElement('div'); // 在頁面中建立一個 div
      wave.className = `wave wave_${x}_${y}`;   // 設定這個 div 的 class 名稱為 wave 和以座標為名的 wave_x_y
      item.appendChild(wave)                    // 在點擊的元素中加入水波 div
      wave.style.setProperty('--w',`${w}px`);   // 動態修改 CSS 變數 --w
      wave.style.setProperty('--h',`${h}px`);   // 動態修改 CSS 變數 --h
      wave.style.setProperty('--x',`${x}px`);   // 動態修改 CSS 變數 --x
      wave.style.setProperty('--y',`${y}px`);   // 動態修改 CSS 變數 --y
      wave.addEventListener("animationend", () => {
        item.removeChild(wave);                 // 動畫事件結束時，移除這個水波 div
      });
    });
  });
</script>

CSS 教學 - CSS 水波效果 - 搭配 JavaScript，點擊時出現水波

CSS 教學 - CSS 水波效果 - 搭配 JavaScript，點擊時出現水波

小結

CSS 的水波效果運用非常多的動畫和裁切技巧，搭配 CSS 變數之後，讓整個動畫過程更加彈性好控制，搭配 JavaScript 也能做出非常棒的水波效果，如果有機會不妨運用看看吧。


上一篇
( Day 18 ) 純 CSS 顯示頁面捲動的進度條
下一篇
( Day 20 ) 純 CSS 製作圓點載入動畫 ( 陰影動畫 )
系列文
關於那些有趣的 CSS 效果 共 35 篇
  1. 31
    ( Day 31 ) 純 CSS 的多種按鈕 hover 效果
  2. 32
    ( Day 32 ) 純 CSS 點擊展開或收折的選單
  3. 33
    ( Day 33 ) 純 CSS 點擊愛心圖案的放射效果
  4. 34
    ( Day 34 ) 純 CSS 數字進度條 ( 會動呦 )
  5. 35
    ( Day 35 ) 純 CSS 碼表 ( 可計時 )
完整目錄
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言
iThome鐵人賽
iThome鐵人賽
參賽組數
416 組
團體組數
14 組
累計文章數
3107 篇
最後報名日
9/15
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 17th鐵人賽 windows php c# windows server linux css react
熱門問題
熱門回答
熱門文章
IT邦幫忙