闪烁文本跨浏览器 [英] Blinking text cross browser

问题描述

首先我尝试了< blink> HTML标记，但它只在Mozilla Firefox中支持。

然后我尝试CSS：

 < style> 
 .blink {text-decoration：blink; } 
< / style> 
  

这不适用于IE 6。

然后我尝试javascript：

 < script type =text / javascript> 
 function doBlink（）{
 // Blink，Blink，Blink ... 
 var blink = document.all.tags（BLINK）
 for（var i = 0 ; i< blink.length; i ++）
 blink [i] .style.visibility = blink [i] .style.visibility ==？ hidden：
} 
 
 function startBlink（）{
 
 if（document.all）
 setInterval（doBlink 500）
} 
 window.onload = startBlink; 
< / script> 
  

现在无法在Safari或Chrome上使用。

任何人都可以帮助我使用闪烁的文字，这将运行在所有不同的流行的浏览器？ （IE 6，Mozilla Firefox，Google Chrome Safari，Opera。）

解决方案

>

  @  -  webkit-keyframes blink {
从{
 opacity：1.0; 
} 
 to {
 opacity：0.0; 
} 
} 
 blink {
 -webkit-animation-name：blink; 
 -webkit-animation-iteration-count：infinite; 
 -webkit-animation-timing-function：cubic-bezier（1.0，0，0，1.0）; 
 -webkit-animation-duration：1s; 
} 
  

它甚至有一个很好的淡化效果。在Safari中可以正常工作，但Chrome在内部有点小。

I want to make a blinking text.

First I tried the <blink> HTML tag, but it is only supported in Mozilla Firefox.

Then I tried CSS:

<style>
.blink {text-decoration: blink; }
</style>

It's not working on IE 6.

Then I tried javascript:

<script type="text/javascript">
function doBlink() {
  // Blink, Blink, Blink...
  var blink = document.all.tags("BLINK")
  for (var i=0; i < blink.length; i++)
    blink[i].style.visibility = blink[i].style.visibility == "" ? "hidden" : "" 
}

function startBlink() {

  if (document.all)
    setInterval("doBlink()",500)
}
window.onload = startBlink;
</script>

Now it's not working on Safari or Chrome.

Can anybody help me use blinking text which will run on all the different popular browsers? (IE 6, Mozilla Firefox, Google Chrome Safari, Opera.)

解决方案

This can be achieved with CSS3 like so

@-webkit-keyframes blink {
    from {
        opacity: 1.0;
    }
    to {
        opacity: 0.0;
    }
}
blink {
    -webkit-animation-name: blink;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: cubic-bezier(1.0, 0, 0, 1.0);
    -webkit-animation-duration: 1s;
}

It even has a nice fade effect. Works fine in Safari, but Chrome cries a little on the inside.

这篇关于闪烁文本跨浏览器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！