波紋動畫是一種常見的網頁設計元素，可以增加頁面的交互感和美觀性。在CSS中實現波紋動畫的方法也相對簡單，下面我們就來一起學習一下。

首先，我們需要在HTML中創建一個容器元素，用來顯示波紋動畫。這個容器可以是一個按鈕、一個鏈接、一個圖片等等，只要能夠觸發事件即可。在這個元素上添加CSS樣式，使得它具有一定的寬度、高度和背景色等屬性。接下來，我們就可以使用偽元素::after來實現波紋動畫。

.btn {
width: 100px;
height: 50px;
background-color: #2196f3;
position: relative;
overflow: hidden;
}
.btn::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 0;
height: 0;
border-radius: 50%;
opacity: 0.5;
background-color: rgba(255, 255, 255, 1);
animation: ripple 0.5s linear;
}
@keyframes ripple {
0% {
width: 0;
height: 0;
opacity: 0.5;
}
100% {
width: 200px;
height: 200px;
opacity: 0;
}
}

在上面的代碼中，我們首先設置了一個樣式為.btn的容器元素，它包含了一些基本屬性，如寬度、高度和背景色等。然后我們使用偽元素::after，將它放置在容器元素的中心位置。接著，我們設置了偽元素的一些相關屬性，如寬度、高度、邊框半徑和背景色等。最后，我們使用了CSS動畫關鍵幀@keyframes來定義了一個名為ripple的動畫，它使得偽元素逐漸擴大并透明消失。

有了上面的代碼，我們就可以實現一個簡單的波紋動畫了。當我們在容器元素上點擊時，便會在容器元素的中心位置出現一個擴散的白色圓形，并逐漸變大消失。

總之，在使用CSS實現波紋動畫時，我們主要需要使用偽元素::after和動畫關鍵幀@keyframes，再配合適當的樣式屬性，即可輕松完成。當然，我們也可以根據不同的需求和效果，對樣式屬性進行多種組合和調整，從而實現各種不同的波紋動畫效果。