CSS3 波紋擴散是一種非常酷炫的效果，經常被用于按鈕、鏈接、圖標等元素的設計中。通過簡單的CSS代碼就可以實現這一效果，讓元素在點擊后產生波紋擴散的動態效果。

.btn {
position: relative;
overflow: hidden;
padding: 8px 20px;
background-color: #FF8800;
color: #ffffff;
border-radius: 3px;
font-size: 20px;
font-weight: 600;
text-align: center;
cursor: pointer;
}
.btn:after {
content: '';
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background-color: rgba(255, 255, 255, 0.5);
border-radius: 100%;
transform: translate(-50%, -50%);
opacity: 0;
}
.btn:hover:after,
.btn:focus:after {
animation: ripple 0.8s linear;
}
@keyframes ripple {
0% {
width: 0;
height: 0;
opacity: 0.5;
}
100% {
width: 200px;
height: 200px;
opacity: 0;
}
}

上述代碼中，首先定義了一個.btn的樣式，用于示例元素的基本樣式，包括背景色、文字顏色、字體大小、圓角等樣式。同時，為了讓波紋擴散效果能夠表現，這個元素設置了position: relative和overflow: hidden屬性。

接下來就是波紋擴散效果的代碼實現。我們通過偽元素:after來添加一個白色的圓形元素。該元素會定位在按鈕的中心位置。初始時，它是透明不可見的。當鼠標懸停在按鈕上或者按鈕獲得焦點時，我們會為這個元素應用一個名為ripple的動畫效果。

ripple動畫實際上是通過關鍵幀的方式來定義的。我們先將圓形元素的寬度和高度設為0，并將透明度設置為0.5。在動畫的100%位置上，將寬度和高度縮放到200px，同時將透明度設置為0，完成波紋擴散的效果。

通過這樣簡單易懂的代碼，就可以輕松地實現CSS3波紋擴散效果了。并且，通過控制animation的屬性，可以進一步調整波紋擴散的速度、時間、顏色等效果，得到更個性化的動畫效果。