CSS文字粒子消散效果是一種炫酷的動態視覺效果，它可以讓文字以粒子狀的方式消散并漂浮在頁面上。通過CSS的一些屬性和偽元素的應用，可以輕松實現這種效果。

.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;
}
}

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

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

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

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

最后，我們定義了一個關鍵幀動畫particles，它的功能是讓粒子從下往上逐漸消散。在起始狀態下，粒子的初始位置為文本的位置，透明度為 1，然后向上移動并逐漸變為透明。

通過上述代碼，加上一些必要的HTML結構，就可以完成CSS文字粒子消散效果的實現。這種視覺效果可以用于展示標題、標語等文本內容，可以吸引用戶的眼球，提高頁面的可視性以及美觀程度。