CSS3水波紋動畫讓網頁呈現(xiàn)出更加生動的效果，讓用戶體驗更加豐富。下面是一段CSS3水波紋動畫相關的代碼：

.button {
position: relative;
display: inline-block;
padding: 12px 24px;
font-size: 16px;
font-weight: bold;
color: #fff;
background-color: #009adb;
border-radius: 25px;
overflow: hidden;
}
.button:hover {
background-color: #0077c0;
}
.button:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background-color: rgba(255, 255, 255, 0.5);
border-radius: 50%;
transform: translate(-50%, -50%);
}
.button:active:after {
width: 200px;
height: 200px;
margin-left: -100px;
margin-top: -100px;
animation: ripple 1s linear;
}
@keyframes ripple {
to {
opacity: 0;
transform: scale(2);
}
}

上述代碼實現(xiàn)了一個水波紋動畫效果的按鈕，當用戶點擊按鈕時，按鈕中心會出現(xiàn)一個白色的圓形水波紋，然后逐漸變淡，最終消失。這個動畫效果使用了CSS3的偽元素（:after）和關鍵幀動畫（@keyframes）實現(xiàn)。

在實現(xiàn)CSS3水波紋動畫時，需要注意以下幾點：

• 使用偽元素（:after）實現(xiàn)水波紋效果。
• 設置偽元素的初始狀態(tài)（width和height為0）以及點擊狀態(tài)（width和height為200px）、位置（使用transform實現(xiàn)居中）、背景色（使用rgba控制透明度）等屬性。
• 使用關鍵幀動畫實現(xiàn)水波紋動畫效果，通過改變偽元素的opacity和transform屬性，實現(xiàn)水波紋從中心向外擴散、越來越透明、最終消失的效果。