HTML如何制作霓虹灯效果？发光文字怎么设计？

text-shadow

<h1>

<span>

<h1 class="neon-text">Neon Text</h1>

text-shadow

.neon-text {
  font-size: 4em;
  color: #fff; /* 文字颜色 */
  text-shadow:
    0 0 5px #f0f, /* 霓虹灯颜色1 */
    0 0 10px #f0f, /* 霓虹灯颜色1 */
    0 0 15px #f0f, /* 霓虹灯颜色1 */
    0 0 20px #0ff, /* 霓虹灯颜色2 */
    0 0 25px #0ff, /* 霓虹灯颜色2 */
    0 0 30px #0ff; /* 霓虹灯颜色2 */
}

@keyframes

text-shadow

.neon-text {
  /* ...之前的样式 */
  animation: neon-glow 1.5s ease-in-out infinite alternate;
}

@keyframes neon-glow {
  from {
    text-shadow:
      0 0 5px #f0f,
      0 0 10px #f0f,
      0 0 15px #f0f,
      0 0 20px #0ff,
      0 0 25px #0ff,
      0 0 30px #0ff;
  }
  to {
    text-shadow:
      0 0 2px #f0f,
      0 0 4px #f0f,
      0 0 6px #f0f,
      0 0 8px #0ff,
      0 0 10px #0ff,
      0 0 12px #0ff;
  }
}

@keyframes

text-shadow

#f0f

#ff0

.neon-text {
  color: #ddd; /* 浅灰色文字 */
  text-shadow:
    0 0 5px #ff0, /* 黄色霓虹灯 */
    0 0 10px #ff0,
    0 0 15px #ff0,
    0 0 20px #0f0, /* 绿色霓虹灯 */
    0 0 25px #0f0,
    0 0 30px #0f0;
}

text-shadow

-webkit-

-moz-

:hover

text-shadow

.neon-text:hover {
  text-shadow:
    0 0 5px #0f0, /* 鼠标悬停时变为绿色 */
    0 0 10px #0f0,
    0 0 15px #0f0,
    0 0 20px #00f, /* 鼠标悬停时变为蓝色 */
    0 0 25px #00f,
    0 0 30px #00f;
}

.neon-text {
  transition: text-shadow 0.3s ease-in-out;
}

text-shadow

box-shadow

text-shadow