跨浏览器闪烁文本

一尘不染

跨浏览器闪烁文本

css

我想做一个闪烁的文本。

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

阅读 358

2020-05-16

共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里面有些哭。

2020-05-16