現(xiàn)在的網(wǎng)站有越來(lái)越多的粒子分散動(dòng)畫(huà)效果，以此增加網(wǎng)站的視覺(jué)吸引力，提高用戶的體驗(yàn)感。其中，CSS粒子分散動(dòng)畫(huà)可以通過(guò)純CSS的代碼來(lái)實(shí)現(xiàn)，非常簡(jiǎn)單。

/*定義粒子父元素*/
.particles {
position: relative;
width: 100%;
height: 100%;
}
/*定義單個(gè)粒子*/
.particle {
position: absolute;
width: 5px;
height: 5px;
border-radius: 50%;
background-color: #fff;
}
/*設(shè)置動(dòng)畫(huà)*/
@keyframes particles {
0% { transform: translateY(0); }
100% { transform: translateY(-100vh); }
}
/*將動(dòng)畫(huà)應(yīng)用于單個(gè)粒子*/
.particle {
animation: particles 5s infinite; /*設(shè)置動(dòng)畫(huà)時(shí)間和循環(huán)*/
animation-delay: calc(random() * 20s); /*設(shè)置每個(gè)粒子的延遲時(shí)間，使粒子動(dòng)畫(huà)看起來(lái)更加自然*/
}

以上的代碼非常簡(jiǎn)單，先定義一個(gè)粒子的父元素，再定義單個(gè)粒子的樣式，最后設(shè)置動(dòng)畫(huà)。通過(guò)設(shè)置transform屬性，動(dòng)畫(huà)可以從下往上移動(dòng)，達(dá)到粒子分散的效果。通過(guò)animation-delay屬性的隨機(jī)調(diào)整，可以讓每個(gè)粒子的運(yùn)動(dòng)軌跡更加不同，整體動(dòng)畫(huà)看起來(lái)更加自然流暢。

CSS粒子分散動(dòng)畫(huà)可以通過(guò)調(diào)整單個(gè)粒子的樣式、動(dòng)畫(huà)時(shí)間、循環(huán)次數(shù)等來(lái)達(dá)到自己想要的效果。而這種動(dòng)畫(huà)效果不僅可以應(yīng)用于背景元素，還可以應(yīng)用于按鈕的hover效果、loading圖標(biāo)等。