用CSS3动画模仿眨眼标记

本文介绍了用CSS3动画模仿眨眼标记的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我真的想让一块文字眨眼的老式风格，而不使用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;

 
 
 您可以找到有关。
 
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动画模仿眨眼标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

Blink

用CSS3动画模仿眨眼标记

问题描述