CSS 是現代 Web 開發中一個非常重要的技術。它可以讓我們優雅地實現各種各樣的效果，其中包括水波紋。水波紋效果是一種常見的用戶交互效果，當用戶點擊時，會出現從點擊位置向外擴散的水波紋效果。接下來我們就來看看如何使用 CSS 實現水波紋效果。

/* CSS 代碼 */
.button {
position: relative;
overflow: hidden;
display: inline-block;
padding: 12px 24px;
color: #fff;
font-size: 16px;
background-color: #f00;
}
.button:hover {
/* 用于處理水波紋效果 */
}
.button:hover:after {
content: "";
display: block;
position: absolute;
width: 60px;
height: 60px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.5);
animation: ripple 0.5s linear;
}
/* 定義水波紋效果動畫 */
@keyframes ripple {
to {
transform: scale(2.5);
opacity: 0;
}
}

上面的代碼中，首先我們對按鈕元素設置了一些基本樣式。在按鈕元素的 hover 狀態下，我們通過偽元素 :after 來創建水波紋。由于水波紋需要從點擊位置向外擴散，因此我們將偽元素的位置設置到按鈕元素的中心，并使用 translate 使其出現在中心位置。

另外，我們設置了偽元素的圓角半徑和背景色，同時使用了 opacity 屬性來控制水波紋的透明度。在動畫方面，我們定義了一個名為 ripple 的動畫，并將其應用到偽元素 :after 上，通過 transform 屬性來控制水波紋的擴散效果。最后，在動畫結束時，我們通過 opacity 屬性將水波紋透明度設置為 0，以達到漸隱效果。

綜上，通過使用 CSS，我們可以實現非常優美的水波紋效果，增加用戶體驗度和頁面的美觀程度。