CSS蕩漾效果指的是CSS動畫中的一種特效，它可以讓頁面中的元素像水波一樣蕩漾起來，給人一種柔和、舒適的感覺。下面我們一起學習如何制作CSS蕩漾效果。

/*首先，我們需要定義一個容器，即層級在最上面的元素*/
.container {
position: relative;
}
/*接著，定義蕩漾效果中的圓形波紋*/
.wave {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.4; /*調整波紋的透明度*/
transform-origin: center center; /*指定旋轉中心位置*/
border-radius: 50%; /*將波紋變成圓形*/
animation: wave 1.5s infinite ease-in-out; /*添加動畫，使波紋持續蕩漾*/
}
/*定義蕩漾效果的CSS動畫*/
@keyframes wave {
0% {
transform: scale(1); /*起始位置*/
}
50% {
transform: scale(1.5); /*變形位置*/
}
100% {
transform: scale(1); /*結束位置*/
}
}

制作完蕩漾效果的CSS代碼后，我們只需要在HTML文件中將蕩漾效果的類名添加到容器元素中即可實現整個頁面的蕩漾效果。如下所示：

<div class="container">
<img src="image.jpg" alt="圖片">
<div class="wave"></div>
</div>

這樣我們就完成了CSS蕩漾效果的制作，可以嘗試調整上述代碼中的參數，讓蕩漾效果更符合自己的需求。