如何在 Css 中制作闪烁的文本？ [复制]

【问题标题】：How to make flashing text in Css? [duplicate]如何在 Css 中制作闪烁的文本？ [复制]
【发布时间】：2015-02-10 18:51:16
【问题描述】：

我了解到大多数网络浏览器不再支持闪烁的文本动画，代码如下：<blink> your text</blink>，但是，是否有其他方法可以为 html 或 css 中的文本提供闪烁动画？

【问题讨论】：

标签： html css

【解决方案1】：

可能不如@SupperSam 的回答那么有效，但可能对跨浏览器更友好一点。你可以使用JS（jQuery）通过切换一个类来实现闪烁效果。

例如。

$(document).ready(function(){
  setInterval(function(){
    $('.flash').toggleClass('active');
  }, 500);
});

在这里查看小提琴：http://jsfiddle.net/pavkr/8yned9f9/

【讨论】：

【解决方案2】：

是的！您现在可以使用 CSS3 动画来处理它。

HTML：

 <h1 class="flash">Look at me flash</h1>

CSS：

.flash {
   animation-name: flash;
    animation-duration: 0.2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-play-state: running;
}

@keyframes flash {
    from {color: red;}
    to {color: black;}
}

Here's a link to a codepen 来看看它的实际效果。

【讨论】：