在網(wǎng)頁設(shè)計中，動畫效果可以讓頁面更加生動和有趣。而CSS水波紋動畫效果，可以讓用戶體驗到更加真實的交互效果，是非常受歡迎的一種效果。

/*CSS 水波紋動畫效果*/
.btn {
position: relative;
display: inline-block;
padding: 20px 40px;
font-size: 24px;
color: #fff;
background-color: #009688;
border-radius: 5px;
overflow: hidden;
z-index: 1;
}
.btn:after {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 0;
height: 0;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.3);
transform: translate(-50%, -50%);
transition: width 1s ease, height 1s ease;
z-index: -1;
}
.btn:hover:after {
width: 500px;
height: 500px;
}

以上代碼就是一個簡單的CSS水波紋動畫效果，我們可以將它應(yīng)用在我們的按鈕等元素上。可以看到，在按鈕上添加了一個偽元素after，通過改變width和height屬性，實現(xiàn)了水波紋的效果。通過:hover的方式，觸發(fā)水波紋動畫效果，使得用戶交互的時候更加有趣。

此外，我們還可以通過改變background-color屬性，調(diào)整按鈕的背景顏色，實現(xiàn)更加多樣化的水波紋動畫效果。CSS水波紋動畫效果可以在各種場景下使用，如網(wǎng)頁按鈕、輪播圖等，讓網(wǎng)頁變得更加有活力。