CSS文字粒子消散效果是一種炫酷的動(dòng)態(tài)視覺效果，它可以讓文字以粒子狀的方式消散并漂浮在頁面上。通過CSS的一些屬性和偽元素的應(yīng)用，可以輕松實(shí)現(xiàn)這種效果。

.particle-text {
display: inline-block;
position: relative;
font-size: 100px;
color: #000;
}
.particle-text::after {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
color: #fff;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
background-color: #000;
mix-blend-mode: lighten;
animation: particles 1.5s ease-out forwards;
}
@keyframes particles {
0% {
transform: translateY(0) scale(1);
opacity: 1;
}
100% {
transform: translateY(-1000px) scale(1.5);
opacity: 0;
}
}

在上述代碼中，我們首先定義了一個(gè)類名為.particle-text的樣式，它用于指定需要應(yīng)用文字粒子消散效果的文本元素。

接著，我們使用偽元素::after來創(chuàng)建一個(gè)裝載粒子的容器，將文本內(nèi)容賦值給content屬性，并設(shè)置一些基本樣式，例如position為相對(duì)定位、尺寸與文本大小相同、顏色為白色、背景顏色為黑色等。

使用clip-path屬性可以將容器的形狀裁剪成正方形，為了以更好的方式顯示，我們選擇了一個(gè)向右傾斜的多邊形。

為了讓粒子有更好的效果，我們將mix-blend-mode屬性的值設(shè)置為lighten，這可以讓文本的背景顏色與粒子的混合更加自然。

最后，我們定義了一個(gè)關(guān)鍵幀動(dòng)畫particles，它的功能是讓粒子從下往上逐漸消散。在起始狀態(tài)下，粒子的初始位置為文本的位置，透明度為 1，然后向上移動(dòng)并逐漸變?yōu)橥该鳌?/p>

通過上述代碼，加上一些必要的HTML結(jié)構(gòu)，就可以完成CSS文字粒子消散效果的實(shí)現(xiàn)。這種視覺效果可以用于展示標(biāo)題、標(biāo)語等文本內(nèi)容，可以吸引用戶的眼球，提高頁面的可視性以及美觀程度。