CSS3鼠標水紋效果是一種很酷的交互效果，能夠提升網頁的用戶體驗。下面我們來介紹一下如何使用CSS3實現鼠標水紋效果。

/* CSS3 鼠標水紋效果 */
button {
position: relative;
overflow: hidden;
background-color: #fff;
border: 1px solid #ccc;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
button:hover {
background-color: #f1f1f1;
}
button:after {
content: "";
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background-color: rgba(255, 255, 255, 0.4);
border-radius: 100%;
transform: translate(-50%, -50%);
pointer-events: none;
}
button:hover:after {
animation: ripple 1s linear;
}
@keyframes ripple {
from {
width: 0;
height: 0;
opacity: 0.4;
}
to {
width: 400px;
height: 400px;
opacity: 0;
}
}

這段代碼包含了兩部分，第一部分是樣式定義，第二部分是鼠標水紋效果的動畫。

首先，我們在按鈕上設置了相對定位和溢出隱藏，這是因為后面我們需要在按鈕上面創建一個偽元素來實現水紋效果。

接著，我們設置了按鈕的背景顏色、邊框、內邊距和字體大小等樣式。當鼠標懸停在按鈕上面時，背景顏色會變成灰色。

在按鈕上面創建了一個偽元素，并使用絕對定位將其放在按鈕的中心位置。這個偽元素具有白色半透明的背景色和圓形邊框，并設置了指針事件為none，這是為了讓鼠標事件穿透到按鈕下面。

最后，在鼠標懸停在按鈕上面時，我們設置了一個動畫效果，讓偽元素變成一個擴散的圓形，直到達到最大半徑時消失。這就是鼠標水紋效果的實現。