html 字体粒子特效

HTML 字体粒子特效可以通过 CSS 动画和 JavaScript 实现。下面是一个使用 CSS 动画的示例代码：

HTML 代码：

<div class="particle-text">Hello World!</div>

CSS 代码：

.particle-text {
  font-size: 60px;
  font-weight: bold;
  position: relative;
  animation: particle-text 1s linear forwards;
}

@keyframes particle-text {
  to {
    color: transparent;
  }
}

.particle-text::before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  color: #fff;
  text-shadow: 0 0 5px #fff;
  mix-blend-mode: difference;
  animation: particle-text-2 1s linear forwards;
}

@keyframes particle-text-2 {
  to {
    transform: scale(1.5);
    opacity: 0;
  }
}

这段代码会在 .particle-text 元素中创建一个逐渐消失的文字特效。在 CSS 中使用 ::before 伪元素来创建一个与原来文字相同的元素，然后对它应用动画效果。这个特效会使文字看起来像是由许多小颗粒组成。

如果想要更加具有交互性的字体粒子特效，可以考虑使用 JavaScript 库，例如 particles.js 或者 mo.js 等。