logo标签列表

使用CSS3动画模拟闪烁标签

htmlcsscss-animationsblink
170

我真的希望能让一段文本以老式的方式闪烁，而不使用javascript或text-decoration.

没有过渡效果，只有*闪烁*，*闪烁*，*闪烁*！

这与那个问题不同，因为我要求闪烁而没有连续的过渡效果，而另一个问题的OP则询问如何用连续的过渡效果替换闪烁

1
我找到的最佳答案不幸被原帖作者@m93a删除了，所以它还不能得到赞同。我认为这个答案应该被恢复并得到赞同，因为它是产生最佳闪烁效果的最简单的解决方案，并且在所有主流浏览器的当前版本中都可以使用（http://caniuse.com/#feat=css-animation）。您还可以在[Emulating <blink> using WebKit CSS3 animation](http://www.john-smith.me/emulating--lt-blink-gt--using-webkit-css3-animation)上阅读有关相同解决方案的简短博客文章。 - user456814
我不明白的是为什么这里每一个答案似乎都把 @-webkit-keyframes 规则放在未加前缀的 @keyframes 规则之后，有些甚至把 -webkit-animation 声明也放在未加前缀的声明之后。 - BoltClock
这个讨论有点啰嗦了。我还没有见过任何支持前缀和标准语法的浏览器。因此它会忽略第一个或第二个，但仍然没有任何区别。 - m93a
如果有人正在寻找平滑的闪烁效果，那么我在这里写了一个答案。链接 - Mr. Alien
1
可能是如何使用CSS3制作闪烁/闪烁文本？的重复问题。 - Brad Werth
显示剩余4条评论
10个回答
281

最初的Netscape <blink> 标签有80%的占空比。这个标签几乎接近实际效果，不过真正的<blink> 只会影响文本：

.blink {
  animation: blink-animation 1s steps(5, start) infinite;
  -webkit-animation: blink-animation 1s steps(5, start) infinite;
}
@keyframes blink-animation {
  to {
    visibility: hidden;
  }
}
@-webkit-keyframes blink-animation {
  to {
    visibility: hidden;
  }
}
This is <span class="blink">blinking</span> text.

您可以在此处了解更多关于Keyframe Animations的信息。

2
是的，这样会简单得多。您可以添加 webkit 前缀，使其在 Chrome 和 Safari 中正常工作。 - m93a
2
这可能在Chrome / Safari上没有使用webkit前缀的情况下无法正常工作。 - David Pelaez
2
我喜欢做的是，不是将闪烁作为一个类来制作，而是将其作为标签（使用 blink { animation: blink 1s steps(5, start) infinite; -webkit-animation: blink 1s steps(5, start) infinite; }）。这样，您只需使用 <blink> 标签，而不是 <span class="blink"> =) - 416E64726577
注意：这仅是OP所请求的“<blink>模仿”。不能与颜色属性一起使用，作为“开关”闪烁动画。 - Martin Schneider
122

让我教你一个小诀窍。

正如Arkanciscan所说的那样，你可以使用CSS3过渡效果。但是他的解决方案与原始的“<a>”标签看起来不同。

你真正需要做的是：

@keyframes blink {
  50% {
    opacity: 0.0;
  }
}
.blink {
  animation: blink 1s step-start 0s infinite;
}
<span class="blink">Blink</span>

JSfiddle演示

如所述，这个答案确实适用于当前版本的Firefox，Chrome，Safari和IE。 - user456814
1
@m93a：0% 100% { opacity: 1.0; } 这部分似乎是多余的，因为它们是默认值，对吧？ - jamadagni
如果您想为 blink 元素本身设置样式，可以使用上面的代码（将 .blink 替换为 blink），并在 CSS 中添加 display: block（我认为它是一个块级元素）。让我们把邪恶带回来！ :-) - Claudia
51

尝试使用这个CSS

@keyframes blink {  
  0% { color: red; }
  100% { color: black; }
}
@-webkit-keyframes blink {
  0% { color: red; }
  100% { color: black; }
}
.blink {
  -webkit-animation: blink 1s linear infinite;
  -moz-animation: blink 1s linear infinite;
  animation: blink 1s linear infinite;
} 
This is <span class="blink">blink</span>

你需要使用浏览器/供应商特定的前缀：http://jsfiddle.net/es6e6/1/.

1
没有像-ms-animation或-o-animation这样的东西，而-moz-animation仅在版本15中存在，现在不要使用它。查看caniuse.com以查看实际支持情况。 - m93a
这只是我的老毛病 - 给所有新的CSS3属性添加后缀。更新的答案。 - Belyash
这不是“闪烁”，而是“闪烁淡出”。 - Martin Schneider
35
实际上，visibility或opacity都是不必要的 - 您只需使用 color 即可。这样做的好处是仅将“闪烁”应用于文本： 

blink {
    display: inline;
    color: inherit;
    animation: blink 1s steps(1) infinite;
    -webkit-animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { color: transparent; } }
@-webkit-keyframes blink { 50% { color: transparent; } }
Here is some text, <blink>this text will blink</blink>, this will not.

Fiddle： http://jsfiddle.net/2r8JL/

5
太棒了！这是唯一一种只提供纯文本闪烁的解决方案。所有其他解决方案都会闪烁元素的背景。为了测试，可以将一个白色文本蓝色背景的<span>标签与一个绿色背景的<body>标签进行对比。只有在这个解决方案中，蓝色的<span>背景不会闪烁。 - jamadagni
这个解决方案是最好的，因为在选择时文本不会闪烁。对于可访问性来说非常好。 - pmiguelpinto
对于步骤（1），额外的投票。当页面上有多个项目闪烁时，这可以大大减少CPU负载。无需计算中间步骤。 - Julesezaar
10

我要为此下地狱：

=keyframes($name)
  @-webkit-keyframes #{$name}
    @content
  @-moz-keyframes #{$name}
    @content
  @-ms-keyframes #{$name}
    @content
  @keyframes #{$name}
    @content


+keyframes(blink)
  25%
    zoom: 1
    opacity: 1

  65%
    opacity: 1 

  66%
    opacity: 0

  100%
    opacity: 0

body
  font-family: sans-serif
  font-size: 4em
  background: #222
  text-align: center

  .blink
    color: rgba(#fff, 0.9)
    +animation(blink 1s 0s reverse infinite)
    +transform(translateZ(0))

.table
  display: table
  height: 5em
  width: 100%
  vertical-align: middle

  .cell
    display: table-cell
    width: 100%
    height: 100%
    vertical-align: middle

http://codepen.io/anon/pen/kaGxC（使用Bourbon的Sass）

1
你的 CodePen 生成了一个 Undefined mixin 'experimental'. 错误，因此看起来它无法编译和显示闪烁动画。 - user456814
2
这就是为什么他因此而下地狱的原因。 - thms
6
另一种变体 

.blink {
    -webkit-animation: blink 1s step-end infinite;
            animation: blink 1s step-end infinite;
}
@-webkit-keyframes blink { 50% { visibility: hidden; }}
        @keyframes blink { 50% { visibility: hidden; }}
This is <span class="blink">blink</span>

4
如果您想要平滑闪烁的文本或类似的效果，可以使用以下代码： 

 .blinking {
    -webkit-animation: 1s blink ease infinite;
    -moz-animation: 1s blink ease infinite;
    -ms-animation: 1s blink ease infinite;
    -o-animation: 1s blink ease infinite;
    animation: 1s blink ease infinite;
  }

  @keyframes "blink" {

    from,
    to {
      opacity: 0;
    }

    50% {
      opacity: 1;
    }
  }

  @-moz-keyframes blink {

    from,
    to {
      opacity: 0;
    }

    50% {
      opacity: 1;
    }
  }

  @-webkit-keyframes "blink" {

    from,
    to {
      opacity: 0;
    }

    50% {
      opacity: 1;
    }
  }

  @-ms-keyframes "blink" {

    from,
    to {
      opacity: 0;
    }

    50% {
      opacity: 1;
    }
  }

  @-o-keyframes "blink" {

    from,
    to {
      opacity: 0;
    }

    50% {
      opacity: 1;
    }
  }
<span class="blinking">I am smoothly blinking</span>

2

在我的情况下，它可以以1秒的间隔闪烁文本。

.blink_me {
  color:#e91e63;
  font-size:140%;
  font-weight:bold;
  padding:0 20px 0  0;
  animation: blinker 1s linear infinite;
}

@keyframes blinker {
  50% { opacity: 0.4; }
}
-3
如果你想要一些发光效果，请使用这个。
@keyframes blink {
  50% {
    opacity: 0.0;
  }
}
@-webkit-keyframes blink {
  50% {
    opacity: 0.0;
  }
}

atom-text-editor::shadow  .bracket-matcher .region {
    border:none;
    background-color: rgba(195,195,255,0.1);
    border-bottom: 1px solid rgb(155,155,255);
    box-shadow: 0px 0px 9px 4px rgba(155,155,255,0.1);
    border-radius: 3px;
    animation: blink 2s steps(115, start) infinite;
    -webkit-animation: blink 2s steps(115, start) infinite;
}
-5
请查看下面的代码解决方案。 

@keyframes blink {
  50% {
    color: transparent;
  }
}

.loader__dot {
  animation: 1s blink infinite;
}

.loader__dot:nth-child(2) {
  animation-delay: 250ms;
}

.loader__dot:nth-child(3) {
  animation-delay: 500ms;
}
Loading <span class="loader__dot">.</span><span class="loader__dot">.</span><span class="loader__dot">.</span>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接