水波紋擴散效果是一種常見的UI交互效果，可以增強用戶的點擊體驗，讓界面更加生動。在CSS中，我們可以使用偽類:hover和偽元素:before來實現水波紋擴散效果。
.button{
position:relative;
overflow:hidden;
display:inline-block;
padding:10px;
transition:all 0.3s ease;
}
.button:hover{
background-color:#33B5E5;
}
.button:before{
content:"";
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:0;
height:0;
background-color:rgba(255, 255, 255, 0.3);
border-radius:50%;
transition:all 0.5s ease;
}
.button:hover:before{
width:200px;
height:200px;
transform:translate(-50%,-50%) scale(1.5);
opacity:0;
}上面的代碼中，我們首先給添加了overflow:hidden的樣式，這樣超出按鈕范圍的部分就會被隱藏。然后在按鈕上使用:hover偽類來設置鼠標懸停時的樣式。當鼠標懸停在按鈕上時，按鈕的背景顏色會變成#33B5E5。
接下來，在按鈕上使用偽元素:before來創建一個圓形的水波紋。使用top、left、transform等屬性來將水波紋定位在按鈕的正中心。在水波紋的樣式中，設置背景顏色為rgba(255, 255, 255, 0.3)，即半透明的白色。這樣可以讓水波紋擴散時出現漸變的效果。
當鼠標懸停在按鈕上時，水波紋的寬度和高度會從0開始擴散，同時使用transform:scale(1.5)來放大水波紋的大小。在擴散過程中，水波紋的透明度會逐漸減小，直到完全消失。
在實際項目中，我們可以針對不同的UI組件使用不同的水波紋效果，比如按鈕、列表項、輸入框等，讓界面更加靈活多樣。
上一篇mysql 終止查詢
下一篇css超大背景圖居中