如何使用 CSS 创建霓虹灯文本

霓虹灯文本可以为任何网站增添美观、未来感的触感。我一直很喜欢霓虹灯的魔力，并且想要使用 CSS 重新创建它们。我想与大家分享一些有关如何做到这一点的技巧！在本文中，我们将探讨如何为文本添加发光效果。我们还将研究使用 CSS 和关键帧动画化霓虹灯的各种方法。

以下是我们即将制作的内容

为文本添加发光效果

首先，让我们使文本发光。这可以通过 CSS 中的 text-shadow 属性来实现。text-shadow 的妙处在于，我们可以通过用逗号分隔来在它上面应用多个阴影

.neonText {
  color: #fff;
  text-shadow:
    0 0 7px #fff,
    0 0 10px #fff,
    0 0 21px #fff,
    0 0 42px #0fa,
    0 0 82px #0fa,
    0 0 92px #0fa,
    0 0 102px #0fa,
    0 0 151px #0fa;
}

text-shadow 需要四个值，前两个值分别代表阴影的水平和垂直位置。第三个值代表模糊半径的大小，而最后一个值代表阴影的颜色。为了增加发光效果的大小，我们将增加第三个值，它代表模糊半径。或者，换句话说

text-shadow: [x-offset] [y-offset] [blur-radius] [color];

以下是使用一小段 CSS 代码获得的效果

您可能想知道那些值都是什么？我是怎么得到它们的，为什么会有这么多？首先，我们使用小的模糊半径为文本字母的外边缘添加了白色发光效果。

.neonText {
  color: #fff;
  text-shadow:
    /* White glow */
    0 0 7px #fff,
    0 0 10px #fff,
    0 0 21px #fff,
}

最后五个值是较大的模糊半径的更宽文本阴影，形成了绿色发光效果。

.neonText {
  color: #fff;
  text-shadow:
    /* White glow */
    0 0 7px #fff,
    0 0 10px #fff,
    0 0 21px #fff,
    /* Green glow */
    0 0 42px #0fa,
    0 0 82px #0fa,
    0 0 92px #0fa,
    0 0 102px #0fa,
    0 0 151px #0fa;
}

如果我们能够用少于五个阴影来实现这一点，那将是极好的，但是我们需要所有这些阴影才能将它们叠加在一起，从而为发光效果添加更多深度。如果我们使用单个 text-shadow，则效果将缺乏使它看起来逼真的深度。

继续尝试各种色调和颜色，以及模糊半径大小！您可以创建各种很酷的发光效果，因此请尝试不同的变体——您甚至可以混合搭配颜色，使一种颜色逐渐过渡到另一种颜色。

“闪烁”效果

您可能会注意到，一些霓虹灯——特别是老式的霓虹灯——会闪烁。灯光会忽明忽暗。我们可以使用 CSS 动画来实现同样的效果！让我们使用 @keyframes 创建一个动画，使灯光以快速、看似随机的闪烁方式忽明忽暗。

@keyframes flicker {
  0%, 18%, 22%, 25%, 53%, 57%, 100% {
    text-shadow:
      0 0 4px #fff,
      0 0 11px #fff,
      0 0 19px #fff,
      0 0 40px #0fa,
      0 0 80px #0fa,
      0 0 90px #0fa,
      0 0 100px #0fa,
      0 0 150px #0fa;
  }
  20%, 24%, 55% {       
    text-shadow: none;
  }
}

就是这样！我们使用了与之前完全相同的 text-shadow 属性和值，将它们包装在一个名为 flicker 的 @keyframes 动画中，并选择时间线上的点来应用阴影，以及完全移除阴影的点。

剩下的就是调用我们想要灯光闪烁的动画。在本例中，我们只将其添加到 <h1> 元素中。让整个标志的一部分闪烁比将闪烁应用于所有文本更逼真。

h1 {
  animation: flicker 1.5s infinite alternate;     
}

请注意，如果我们确实希望整个标志闪烁，那么我们可以从技术上移除 .neonText 类上的 text-shadow 值，将动画添加到其中，并让 @keyframes 应用阴影。

这是一种很酷的效果，可以为我们的霓虹灯文本增添更多真实感！当然，您也可以尝试其他效果，本文中将进一步探讨这些效果。例如，如何实现更强的脉动动画或更微妙的闪烁？

让我们探索这些效果和其他效果！

脉动发光

我们刚刚简单地预览了一下。它使用了关键帧，与前面的示例一样，我们在其中指定了动画开始和结束时的模糊半径大小。

我们希望模糊半径的大小在动画结束时最小，因此我们只需减小 0% 关键帧中每个 text-shadow 值的模糊半径值。这样，模糊的大小会逐渐起伏，形成脉动效果。

@keyframes pulsate {
  100% {
    /* Larger blur radius */
    text-shadow:
      0 0 4px #fff,
      0 0 11px #fff,
      0 0 19px #fff,
      0 0 40px #0fa,
      0 0 80px #0fa,
      0 0 90px #0fa,
      0 0 100px #0fa,
      0 0 150px #0fa;
  }
  0% {
    /* Smaller blur radius */
    text-shadow:
      0 0 2px #fff,
      0 0 4px #fff,
      0 0 6px #fff,
      0 0 10px #0fa,
      0 0 45px #0fa,
      0 0 55px #0fa,
      0 0 70px #0fa,
      0 0 80px #0fa;
  }
}

再次，我们将动画添加到某个元素中。我们再次选择 <h1>

h1 {
  animation: pulsate 2.5s infinite alternate;     
}

以下是将它们全部组合在一起后的效果

微妙闪烁

我们可以稍微降低一点，使闪烁动作非常微妙。我们只需稍微减小 0% 关键帧中的模糊半径大小，但不要像前面的示例那样减小。

@keyframes pulsate {
  100% {
    /* Larger blur radius */
    text-shadow:
      0 0 4px #fff,
      0 0 11px #fff,
      0 0 19px #fff,
      0 0 40px #f09,
      0 0 80px #f09,
      0 0 90px #f09,
      0 0 100px #f09,
      0 0 150px #f09;
  }
 0% {
    /* A slightly smaller blur radius */
    text-shadow:
      0 0 4px #fff,
      0 0 10px #fff,
      0 0 18px #fff,
      0 0 38px #f09,
      0 0 73px #f09,
      0 0 80px #f09,
      0 0 94px #f09,
      0 0 140px #f09;
  }
}

由于闪烁更加微妙，模糊半径的减小幅度也不大，因此我们应该增加动画每秒发生的次数，以模拟更频繁的闪烁。这可以通过缩短动画的持续时间来实现，例如缩短为 0.11s

h1 {
  animation: pulsate 0.11s ease-in-out infinite alternate;    
}

使用背景图像

如果我们的标志悬挂在墙壁上而不是空白处，那就太棒了。让我们为它获取一个背景图像，比如从 Unsplash 上获取一些 砖纹理 或者其他类似的东西

body {
  background-image: url(wall.jpg);
}

添加边框

我们可以添加的最后一个细节是标志周围的圆形或矩形边框。这只是为文本添加框架并使其看起来像实际标志的一种不错的方式。通过为边框添加阴影，我们可以使其具有与文本相同的霓虹灯效果！

文本容器元素需要边框。假设我们只使用 <h1> 元素。这就是获取边框的元素。我们调用 border 简写属性来在标题周围创建实心白色边框，并添加一些填充，使文本有空间呼吸

h1 {
  border: 0.2rem solid #fff;
  padding: 0.4em;
}

我们可以稍微圆角边框，使边框不那么尖锐，为此，可以在标题上应用 border-radius。您可以使用最适合您的值来获得所需的圆角程度。

h1 {
  border: 0.2rem solid #fff;
  border-radius: 2rem;
  padding: 0.4em;
}

最后一步是发光！现在，text-shadow 无法用于边框，但没关系，因为这就是 box-shadow 属性的设计目的。语法非常相似，因此我们甚至可以提取 text-shadow 的值，并略微调整它们

h1 {
  border: 0.2rem solid #fff;
  border-radius: 2rem;
  padding: 0.4em;
  box-shadow: 0 0 .2rem #fff,
              0 0 .2rem #fff,
              0 0 2rem #bc13fe,
              0 0 0.8rem #bc13fe,
              0 0 2.8rem #bc13fe,
              inset 0 0 1.3rem #bc13fe;
}

注意到 inset 关键字了吗？text-shadow 无法做到这一点，但将其添加到边框的 box-shadow 中可以使我们能够在边框的两侧获得一些发光效果，从而实现逼真的深度。

辅助功能如何？

如果用户偏好减少运动，我们需要使用 prefers-reduced-motion 媒体查询来满足这一需求。这使我们能够移除动画效果，以便为偏好减少运动的用户提供更易于访问的文本。

例如，我们可以修改上面 Pen 中的闪烁动画，使启用 prefers-reduced-motion 的用户看不到动画。回想一下，我们将闪烁效果仅应用于 <h1> 元素，因此我们将关闭此元素的动画

@media screen and (prefers-reduced-motion) { 
  h1 {
    animation: none;
  }
}

确保满足用户的偏好非常重要，使用此媒体查询是为偏好减少运动的用户提供更易于访问效果的一种好方法。

结论

希望这篇文章能向您展示如何为您的下一个项目创建很酷的霓虹灯文本！请务必尝试各种字体、模糊半径大小和颜色，并且不要忘记尝试不同的动画——这个世界充满了可能性。如果您创建了想要分享的酷炫阴影效果，请添加评论。感谢您的阅读！