使用CSS3动画模仿眨眼标记 [英] Imitating a blink tag with CSS3 animations

问题描述

我真的想让一块文字眨眼的老式风格，而不使用javascript或文本装饰。

无转换，只有*闪烁*，*闪烁*，*闪烁*！

解决方案

原来的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;      >闪烁< / span>文本。 

您可以找到更多关于这里的关键帧动画。

I really want to make a piece of text blink the old-school style without using javascript or text-decoration.

No transitions, only *blink*, *blink*, *blink*!

解决方案

The original Netscape <blink> had an 80% duty cycle. This comes pretty close, although the real <blink> only affects text:

.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.

You can find more info about Keyframe Animations here.

这篇关于使用CSS3动画模仿眨眼标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！