CSS粒子浮動(dòng)是近年來(lái)很受歡迎的一種前端效果，它使用CSS 3動(dòng)畫屬性和偽元素在頁(yè)面上生成了很多漂浮的小球，給人一種非常靈動(dòng)的視覺(jué)效果。

這種效果的實(shí)現(xiàn)并不難，只需要一些基本的CSS知識(shí)和一些對(duì)CSS 3動(dòng)畫屬性的理解就可以了。

.particle {
position: absolute;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #ffffff;
box-shadow: 0 0 10px #ffffff;
animation: particle-floating 5s linear infinite;
}
@keyframes particle-floating {
from {
top: 0;
opacity: 1;
}
50% {
top: 50%;
opacity: 0.7;
}
to {
top: 100%;
opacity: 0;
}
}
.container {
position: relative;
width: 500px;
height: 500px;
background-color: #333333;
}
.container::before {
content: '';
position: absolute;
top: -10px;
left: -10px;
right: -10px;
bottom: -10px;
z-index: -1;
background-color: rgba(255, 255, 255, 0.2);
filter: blur(10px);
}

以上代碼中，“.particle”類定義了這些漂浮小球的基本樣式，包括位置、大小、形狀、顏色和動(dòng)畫屬性等等。“.container”類用來(lái)定義容器的大小和背景顏色。

這里通過(guò)偽元素::before來(lái)為容器添加了一個(gè)背景模糊效果，使漂浮的小球更加突出。

動(dòng)畫部分通過(guò)@keyframes關(guān)鍵字定義，從初始狀態(tài)開(kāi)始，逐漸改變小球的位置和透明度，最終消失在容器的底部。這個(gè)動(dòng)畫會(huì)不斷循環(huán)，從而讓小球始終在頁(yè)面上漂浮。

使用CSS粒子浮動(dòng)可以為網(wǎng)站添加一定的視覺(jué)效果，提升用戶的體驗(yàn)和感受。當(dāng)然，注意不要過(guò)度使用，以免影響頁(yè)面的整體性和可用性。