CSS 水波效果
這篇教學會使用 CSS 的裁切路徑 clip-path、背景圖片定位、背景尺寸和 CSS 動畫，只用簡單的 div 架構搭配虛擬元素，就能做出漂亮的水波效果，最後還會搭配 JavaScript，實作點擊圖片就出現水波的有趣特效。
快速導覽：
水波動畫原理
CSS 水波的架構很簡單，只需要在底圖 div 中增加一層 div 作為「水波層」，水波層中除了元素本身，還有元素的虛擬元素 ::before 和 ::after 共三層，當這三層尺寸略有不同並「由大到小」依序出現，就能產生大小交錯的水波效果，HTML 結構如下：
<div class="bg"> <!-- 底圖 -->
<div class="wave"></div> <!-- 水波層，例外搭配這層的虛擬元素 ::before 和 ::after -->
</div>
下方範例使用 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 動畫的「延遲」，所以無法重複播放，如果需要重複不斷播放，要將動畫改成三組不同的動畫影格 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>
水波動畫
延續上方單色水波動畫程式碼，將單色背景改為「背景圖」，運用 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>
搭配 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 也能做出非常棒的水波效果，如果有機會不妨運用看看吧。
意見回饋
如果有任何建議或問題，可傳送「意見表單」給我，謝謝～