CSS 霓虹灯动画

伙计们！谢谢大家🥳，我的新闻通讯订阅者已经达到100人了，我太开心了！

人们选择阅读我的文章并订阅每天接收我的电子邮件，这对我来说意义重大，我从心底说：谢谢！🧁

因此我想制作一个很酷的 100 个订阅CSS霓虹灯动画来庆祝。

看看下面我们今天要制作的令人惊叹的CSS霓虹动画

HTML结构

至于我们的，HTML我们需要以下结构：

<div class="container">
  <div class="text">
    <b>100 s<span>u</span>bs</b>
  </div>
</div>

我们将使用容器将所有内容置于中心，并使用跨度来制作一个很酷的霓虹灯故障。

CSS 霓虹灯

首先，我们要导入一个很酷的Google 字体，它看起来可以用于霓虹字母。

@import url(//fonts.googleapis.com/css?family=Pacifico);

接下来是我们的霓虹灯效果！

.text b {
  font: 400 25vh 'Pacifico';
  letter-spacing: -5px;
  color: #fee;
  text-shadow: 0 0px 10px, 0 0 1em #560a86, 0 0 0.5em #560a86, 0 0 0.1em #560a86,
    0 10px 3px #333;
}

如您所见，我们将字体设置为 Google 字体，并将其字体粗细设置为25vh(25%视口高度)。

然后我们使用text-shadow让它显示为霓虹灯效果。我们添加了多个发光“层”，最后以深灰色结束，使其看起来更浓密。

注意：您可以使用像这样的酷工具来创建文本阴影

CSS 霓虹灯故障动画

我们在字母上添加了一个小故障。这在 Neon 中很常见，我们可以使用动画u来重现它。CSS

.text b span {
  animation: flicker linear infinite 2s;
}

@keyframes flicker {
  75% {
    color: inherit;
    text-shadow: inherit;
  }
  76% {
    color: #222;
  }
  77% {
    color: inherit;
    text-shadow: none;
  }
  78% {
    color: inherit;
    text-shadow: inherit;
  }
  79% {
    color: #222;
    text-shadow: none;
  }
  80% {
    color: inherit;
    text-shadow: inherit;
  }
  90% {
    color: #222;
    text-shadow: none;
  }
  90.5% {
    color: inherit;
    text-shadow: inherit;
  }
}

实际的动画是重置颜色和瞬间消除文本阴影的混合；这给它带来了闪烁的吸引力。

感谢您的阅读，让我们联系起来！

感谢您阅读我的博客。欢迎订阅我的电子邮件简报，并在Facebook或Twitter上与我联系。

鏂囩珷鏉ユ簮锛�https://dev.to/dailydevtips1/css-neon-animation-b55