CSS點擊粒子特效是Web設計中常用的動畫效果之一，它可以為網頁添加一些動感和趣味性。在這篇文章中，我們將介紹如何使用CSS來實現點擊粒子特效。

/* CSS代碼 */
.particles {
position: absolute;
pointer-events: none;
z-index: 999;
overflow: hidden;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.particles .particle {
position: absolute;
pointer-events: none;
border-radius: 50%;
background-color: #ffffff;
animation: particles 2s ease-in-out infinite;
}
@keyframes particles {
0% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(0.5);
opacity: 0.5;
}
100% {
transform: scale(2);
opacity: 0;
}
}

如上所述，我們將創建一個名為.particles的元素，它是絕對定位的，占據整個頁面并隱藏超出范圍的任何元素。.particle元素是每個粒子的容器，并且有圓形邊界和白色背景顏色。我們使用CSS動畫來控制每個粒子的行為。

下面是使用JavaScript來控制點擊特效的代碼。

/* JavaScript代碼 */
const particles = document.querySelector('.particles');
document.addEventListener('click', function (event) {
const particle = document.createElement('span');
particle.setAttribute('class', 'particle');
particle.style.top = event.pageY + 'px';
particle.style.left = event.pageX + 'px';
particles.appendChild(particle);
setTimeout(() =>{
particle.remove();
}, 2000);
});

上面的JavaScript代碼監聽文檔的click事件，并在每次點擊時創建一個新的.particle元素，設置其位置為點擊位置。然后將其添加到.particles元素中，并在2秒后將其刪除。

現在，我們已經完成了CSS點擊粒子特效。您可以將其應用于您的網站，以為用戶帶來更好的用戶體驗。