CSS鼠標單擊特效是網頁設計中常用的一種互動效果，它可以讓用戶在單擊某個頁面元素時，出現一些特效，以增強用戶的交互感受。下面我們就來看一下如何使用CSS實現鼠標單擊特效。

// HTML代碼片段
<div class="click-effect">點擊我試試</div>
// CSS樣式設定
.click-effect {
position: relative;  // 定位屬性，以便后面設置偽元素
display: inline-block;  // 將元素設置為行內塊元素,以便像素樣式按照寬高生效
padding: 20px;  // 填充
background: #fff;  // 背景色
border: 2px solid #000;  // 邊框
color: #000;  // 文本顏色
cursor: pointer;  // 鼠標變成手型
// 設置偽元素，即在元素上設置一個虛擬的元素，用來產生新的樣式特效
&::after {
content: "";
position: absolute;  // 絕對定位
top: 50%;  // 縱向位置
left: 50%;  // 橫向位置
transform: translate(-50%, -50%);  // 位移方式
width: 0;  // 寬度為0
height: 0;  // 高度為0
border-radius: 50%;  // 圓形邊框
background: rgba(0, 0, 0, 0.1);  // 顏色設定，這里是半透明顏色
}
// 鼠標單擊時改變樣式
&:active::after {
width: 300px;  // 水平方向增加的寬度
height: 300px;  // 豎直方向增加的高度
}
}

以上 CSS 代碼實現了一個簡單的鼠標單擊特效。首先，我們設置一個 div 元素，為了方便在元素上添加樣式及偽元素，給它添加了一個 class 名為 click-effect，這樣我們就可以在 CSS 樣式表中設置該元素的樣式了。

接著，在 CSS 樣式表中設置 click-effect 的基本樣式，包括定位屬性、填充、背景色、邊框等。然后，我們使用偽元素 ::after，在 div 元素上添加一個半透明的圓形效果，以便鼠標單擊時進行動畫變化。

最后，我們使用偽元素 &:active 和 ::after，當鼠標單擊 div 元素時，顯示出半透明圓形的動畫效果，并在元素上出現一個放大的圓形。

鼠標單擊特效是網頁設計的重要組成部分，通過使用 CSS 樣式表，在元素上添加一些特效并結合偽元素，可以輕松地實現這種效果。希望這篇教程對大家有所幫助。