霓虹灯文字 - 点亮你的网站，绽放未来感！

前端

2023-11-09 09:15:26

霓虹灯文字的魅力

霓虹灯文字以其独特的视觉效果，在网页设计中一直备受欢迎。这种充满未来感和动感的文字，能够为网站增添活力，并吸引用户的注意力。

实现霓虹灯文字的三要素

文本发光效果 ：这是霓虹灯文字的核心，可以通过CSS的text-shadow属性来实现。
霓虹灯动画 ：可以通过CSS的keyframes属性来实现。
霓虹灯颜色 ：可以选择不同的颜色来创建不同风格的霓虹灯文字。

具体实现步骤

创建文本元素

<p>霓虹灯文字</p>

添加文本发光效果

p {
  text-shadow: 0 0 10px #ff0000, 0 0 20px #ff0000, 0 0 30px #ff0000, 0 0 40px #ff0000, 0 0 50px #ff0000;
}

添加霓虹灯动画

@keyframes neon {
  0% {
    text-shadow: 0 0 10px #ff0000, 0 0 20px #ff0000, 0 0 30px #ff0000, 0 0 40px #ff0000, 0 0 50px #ff0000;
  }
  50% {
    text-shadow: 0 0 50px #ff0000, 0 0 60px #ff0000, 0 0 70px #ff0000, 0 0 80px #ff0000, 0 0 90px #ff0000;
  }
  100% {
    text-shadow: 0 0 10px #ff0000, 0 0 20px #ff0000, 0 0 30px #ff0000, 0 0 40px #ff0000, 0 0 50px #ff0000;
  }
}

p {
  animation: neon 1s infinite alternate;
}

调整霓虹灯颜色

p {
  text-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00, 0 0 30px #00ff00, 0 0 40px #00ff00, 0 0 50px #00ff00;
  animation: neon 1s infinite alternate;
}

示例代码

<!DOCTYPE html>
<html>
<head>
  
  <style>
    p {
      text-shadow: 0 0 10px #ff0000, 0 0 20px #ff0000, 0 0 30px #ff0000, 0 0 40px #ff0000, 0 0 50px #ff0000;
      animation: neon 1s infinite alternate;
    }

    @keyframes neon {
      0% {
        text-shadow: 0 0 10px #ff0000, 0 0 20px #ff0000, 0 0 30px #ff0000, 0 0 40px #ff0000, 0 0 50px #ff0000;
      }
      50% {
        text-shadow: 0 0 50px #ff0000, 0 0 60px #ff0000, 0 0 70px #ff0000, 0 0 80px #ff0000, 0 0 90px #ff0000;
      }
      100% {
        text-shadow: 0 0 10px #ff0000, 0 0 20px #ff0000, 0 0 30px #ff0000, 0 0 40px #ff0000, 0 0 50px #ff0000;
      }
    }
  </style>
</head>
<body>
  <p>霓虹灯文字</p>
</body>
</html>