CSS動態粒子背景是一種通過CSS、HTML和JavaScript技術實現的炫酷效果，讓網站頁面更具有活力和視覺沖擊力。通過大量的小粒子組成背景，讓頁面動態、流暢，并會根據用戶操作而做出相應的反應，帶來更加優秀的用戶體驗。

/* CSS代碼 */
body {
background: #000;
overflow: hidden;
}
canvas {
position: absolute;
top: 0;
left: 0;
}
.particles {
position: absolute;
width: 100%;
height: 100%;
}
/* JavaScript代碼 */
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const particles = [];
let width = canvas.width = window.innerWidth;
let height = canvas.height = window.innerHeight;
function Particle() {
this.x = Math.random() * width;
this.y = Math.random() * height;
this.velX = Math.random() * 2 - 1;
this.velY = Math.random() * 2 - 1;
this.size = Math.random() * 3 + 1;
}
Particle.prototype.update = function() {
this.x += this.velX;
this.y += this.velY;
if(this.x< 0 || this.x >width) {
this.velX = -this.velX;
}
if(this.y< 0 || this.y >height) {
this.velY = -this.velY;
}
}
Particle.prototype.draw = function() {
ctx.fillStyle = '#fff';
ctx.beginPath();
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
ctx.closePath();
ctx.fill();
}
for(let i = 0; i< 150; i++) {
particles.push(new Particle());
}
function loop() {
ctx.clearRect(0, 0, width, height);
for(let i = 0; i< particles.length; i++) {
particles[i].update();
particles[i].draw();
}
requestAnimationFrame(loop);
}
loop();

如上使用了HTML中的canvas標簽，結合JavaScript代碼生成了粒子效果的動態背景。用戶可以根據預設調節參數，也可以修改代碼實現自己喜歡的效果，讓網頁更加生動、有趣。