CSS中的粒子背景是近年來非常受歡迎的一種背景效果。通過使用CSS技術，我們可以實現一個獨特的、動態的背景效果，吸引用戶的目光，增加網站的視覺吸引力。

以下是一個簡單的CSS粒子背景實現例子：

/* 設置html和body元素的高度和寬度為100% */
html, body {
height: 100%;
width: 100%;
}
/* 創建粒子容器 */
#particles {
/* 設置容器高度和寬度為100% */
height: 100%;
width: 100%;
/* 設置容器背景色 */
background-color: #08002b;
/* 設置背景圖片為無 */
background-image: none;
/* 設置背景重復為no-repeat */
background-repeat: no-repeat;
/* 設置背景大小 */
background-size: cover;
/* 設置固定的背景 */
background-attachment: fixed;
/* 定位 */
position: absolute;
}
/* 創建粒子 */
#particles:before {
/* 創建粒子大小 */
height: 150px;
width: 150px;
/* 設置顏色 */
background-color: #fff;
/* 設置圓角 */
border-radius: 100%;
/* 把元素設置為內聯塊級元素 */
display: inline-block;
/* 如果不需要圖層能夠交互，則z-index的值為-1 */
z-index: -1;
/* 設置動畫 */
-webkit-animation: particles 3s ease-in-out infinite;
animation: particles 3s ease-in-out infinite;
/* 定位 */
position: absolute;
/* 設置左右邊距 */
left: 40%;
/* 設置上下邊距 */
top: 60%;
}
/* 創建動畫關鍵幀 */
@-webkit-keyframes particles {
0% {
opacity: 0;
-webkit-transform: scale(0);
}
50% {
opacity: 1;
-webkit-transform: scale(1);
}
100% {
opacity: 0;
-webkit-transform: scale(0);
}
}
@keyframes particles {
0% {
opacity: 0;
transform: scale(0);
}
50% {
opacity: 1;
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(0);
}
}

如上所示，我們可以使用偽元素:before在容器內創建粒子。通過使用CSS3的關鍵幀動畫，讓粒子在容器內移動、展示、消失。

當然，以上只是CSS粒子背景的非常基礎的demo，CSS粒子背景還有很多不同的變化，可以按照自己需要進行調整。無論是陰影、顏色漸變、大小、速度等等樣式屬性，都可以隨意搭配，實現更加炫酷的效果，為網站的用戶體驗帶來更大的提升。