如何使用 CSS 创建闪烁文本？

要在网站页面上创建一个引人注意的元素，闪烁文本是一个很好的选择。在 CSS 中实现闪烁文本很容易，这里将介绍两种方法。

使用动画实现闪烁文本

通过 CSS 动画，我们可以创建一个无限循环的文本闪烁效果。以下是代码示例：

/* 定义动画效果 */
@keyframes blink {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}

/* 应用动画效果 */
.blink {
  animation: blink 1s infinite;
}

在这个示例中，我们定义了一个名为 blink 的动画，它有三个阶段：0%、50% 和 100%。在 0% 和 100% 的阶段，文本的不透明度为 1，而在 50% 的阶段，文本的不透明度为 0。这样就可以实现闪烁的效果。

然后，我们将这个动画应用到一个类名为 blink 的元素上，并将动画的周期设置为 1 秒，同时设置无限循环。

<p class="blink">Hello, world!</p>

这样就可以在一个段落元素中实现闪烁文本的效果了。

使用闪烁文本

另一种创建闪烁文本的方法是使用 text-decoration 属性。以下是代码示例：

.blink {
  text-decoration: blink;
}

在这个示例中，我们使用了 text-decoration 属性，并将它的值设置为 blink。这样，文本就会以闪烁的方式呈现。

<p class="blink">Hello, world!</p>

同样，我们可以将这个类名应用到一个段落元素上，以实现闪烁文本的效果。

无论使用哪种方法，你都可以通过简单的 CSS 样式实现一个引人注目的闪烁文本效果。

献上代码，可自行复制和尝试使用：

/* 使用动画实现闪烁文本 */
@keyframes blink {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}

.blink-animation {
  animation: blink 1s infinite;
}

/* 使用闪烁文本 */
.blink-text {
  text-decoration: blink;
}