CSS3是一種在網頁設計中廣泛使用的樣式表語言。它提供了豐富的樣式效果，其中包括了許多新特性，例如圓角、陰影、漸變等等。其中，漣漪是一種非常受歡迎的效果之一。

/* CSS代碼實現漣漪效果 */
.ripple {
position: relative;
overflow: hidden;
transform: translate3d(0, 0, 0);
}
.ripple-effect {
position: absolute;
border-radius: 50%;
transform: scale(0);
animation: ripple-animation 1s;
}
@keyframes ripple-animation {
to {
transform: scale(2);
opacity: 0;
}
}
/* HTML代碼 */

如上所示，我們可以通過給元素添加`.ripple`的類來實現漣漪效果。具體來說，我們需要在該類中設置元素`position`為相對定位，該元素的子元素也需要被添加`.ripple-effect`類。 `.ripple-effect`類需要設置`position`為絕對定位， 并且將`border-radius`設置為50%以使得元素呈圓形。同時，我們還需要在該類中設置`transform: scale(0)`，以使得元素的大小初時為0。

接著，我們需要定義一個`@keyframes`規則。使用這個規則，我們可以定義一個從初始狀態到結束狀態的動畫序列。 對于漣漪效果，我們希望元素能夠逐漸擴大，并逐漸透明，因此在我們的規則中，我們將元素的`scale`屬性從0逐漸放大到2，同時讓透明度漸漸降低到0。

最后，我們在父級容器中添加`.ripple`的類，并在其中添加一個`.ripple-effect`的子類。當我們為這個按鈕添加點擊事件時，就可以實現一個漂亮的漣漪效果。漣漪效果在現代網頁設計中經常被使用，可以幫助增加頁面的視覺吸引力，同時也能夠提高用戶的交互體驗。