在前端開發中，CSS可以用來實現很多酷炫的效果，其中之一就是粒子效果。

.particles {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
z-index: -1;
}

粒子效果可以為網頁添加視覺上的動態感，常常被應用于背景圖或是導航欄等部分。我們可以使用前端框架或是插件直接實現，也可以自己手動編寫代碼。

const createParticle = (x, y) =>{
const particle = document.createElement('span');
const deg = Math.random() * 360;
const radius = Math.random() * 200;
const posX = radius * Math.sin(deg) + x;
const posY = radius * Math.cos(deg) + y;
const size = Math.random() * 3;
particle.style.top = posY + 'px';
particle.style.left = posX + 'px';
particle.style.width = size + 'px';
particle.style.height = size + 'px';
const container = document.querySelector('.particles');
container.appendChild(particle);
}
window.addEventListener('click', (e) =>{
const x = e.clientX;
const y = e.clientY;
createParticle(x, y);
});

以上為一個簡單的手動編寫的粒子效果代碼，它會在鼠標點擊處生成一些大小、顏色、位置、運動速度等不同的粒子，直到占滿整個屏幕。

未來，粒子效果將會變得更加豐富多彩，也無限創意。