javascript - 闪烁文本跨浏览器

Question

我想制作一个闪烁的文字。

首先我尝试了 <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。)

Answer 1

这可以像这样用CSS3来实现

@-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;
}

它甚至有一个很好的淡入淡出效果。在 Safari 中运行良好，但 Chrome 在内部有点崩溃。