有没有炫酷的html粒子代码

当然有！以下是一个简单但炫酷的HTML粒子效果代码示例：

<div class="particle-bg">
  <h1>Hello, World!</h1>
</div>

<style>
.particle-bg {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
.particle-bg h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 5em;
  font-weight: bold;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2);
  color: white;
}
.particle {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  opacity: 0.5;
  background-color: white;
  animation: particle 5s infinite;
}
@keyframes particle {
  0% {
    transform: translate(0, 0) rotate(0);
  }
  100% {
    transform: translate(100vw, 100vh) rotate(720deg);
  }
}
</style>

<script>
for (var i = 0; i < 100; i++) {
  var particle = document.createElement('div');
  particle.className = 'particle';
  particle.style.left = Math.random() * 100 + '%';
  particle.style.top = Math.random() * 100 + '%';
  particle.style.animationDuration = Math.random() * 5 + 2 + 's';
  document.querySelector('.particle-bg').appendChild(particle);
}
</script>

这个代码示例中，我们首先创建了一个有背景的`<div>`元素，然后在其中添加了一个带有文字的`<h1>`元素。然后，我们使用CSS和JavaScript创建了一些小的、随机移动和旋转的白色粒子，用来营造出一个动态的、炫酷的背景效果。

你可以通过修改CSS和JavaScript代码来调整粒子的数量、大小、运动轨迹、颜色等等，以实现更多样化的效果。