點擊擴散效果是一種很酷的CSS特效，它可以使用戶在點擊頁面元素時觀察到具有動態效果的呈現。在以下的示例中，我們將學習使用CSS實現這種效果的方法。

/* 在單擊事件上添加偽類來實現擴散效果 */
.button {
position: relative;
display: inline-block;
padding: 1em 2em;
color: #fff;
background-color: #ff3366;
border-radius: 30px;
overflow: hidden;
z-index: 1;
}
.button:after {
content: "";
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background-color: #ff3366;
opacity: 0.5;
border-radius: 30px;
transform: translate(-50%, -50%);
z-index: -1;
}
.button:active:after {
width: 100%;
height: 100%;
transition: width 0.2s ease-out, height 0.2s ease-out;
}

在上述CSS中，我們首先定義一個具有.button類的元素，并且在其上添加一個:after 偽類。因為我們希望擴散效果是由點擊事件觸發的，所以在偽類中使用:active 偽類。

然后，我們使用 position: relative 使得我們的元素具有相對定位，并使用 overflow: hidden 隱藏偽類擴散效果的初始狀態。之后，將偽類的 content 設置為空，并使用 display: block 和 position: absolute 將其放置在元素的中心位置。

我們還為偽類設置了具有圓角的背景顏色，并使用opacity 透明度屬性來控制背景色的透明度，以獲得更逼真的外觀。

與此同時，我們使用 transform 屬性將偽類相對于元素的中心點調整到其準確的位置。

最后，當用戶單擊元素時，將使用 :active 偽類觸發擴散效果的過渡。為覆蓋元素的大小，我們通過將偽類的寬度和高度從0調整到100%，來使擴散效果定義。

上述說明以代碼的形式列出，以達到更好的解釋說明效果。