在網頁設計和開發中，css是一個非常重要的技術。除了常見的用法，如布局和樣式設計，還有一些有趣的效果可以通過css實現。今天我們來介紹一種鼠標移入有水紋效果的技巧。

/* css代碼 */
/* 容器的樣式 */
.ripple-container {
overflow: hidden;
position: relative;
}
/* 水波紋的樣式 */
.ripple {
position: absolute;
background-color: rgba(255, 255, 255, 0.5);
border-radius: 50%;
animation: ripple-scale 1s linear;
}
/* 動畫效果 */
@keyframes ripple-scale {
to {
transform: scale(2);
opacity: 0;
}
}

這是實現水波紋效果的css代碼。它主要由兩個部分組成：容器的樣式和水波紋的樣式。容器的樣式是定義了一個具有“隱藏溢出”和“相對定位”的div容器；水波紋的樣式則是定義了一個具有“絕對定位”和“背景是半透明白色”的div元素。

通過將一個包含文本內容的p標簽放在容器內，我們可以在鼠標移入時觸發水波紋效果。此時我們只需要在js代碼中監聽p標簽的鼠標移入事件，動態添加一個具有水波紋樣式的div元素，然后根據寬度和高度計算出相對于鼠標位置的div元素位置。最后在動畫結束后移除div元素即可。

上面是關于css鼠標移入有水紋效果的介紹。如果你對這項技巧感興趣，不妨試著自己實現一下吧！