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 也能做出非常棒的水波效果，如果有机会不妨运用看看吧。
微信扫码关注
抖音扫码关注