首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >跨浏览器闪烁文本

跨浏览器闪烁文本
EN

Stack Overflow用户
提问于 2011-02-04 12:12:00
回答 10查看 72K关注 0票数 21

我想发一条闪烁的短信。

首先,我尝试了Mozilla HTML标记,但只有Mozilla Firefox支持它。

然后我尝试了CSS:

代码语言:javascript
复制
<style>
.blink {text-decoration: blink; }
</style>

它在IE 6上不起作用。

然后我尝试了javascript:

代码语言: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上运行了。

有没有人可以帮助我使用闪烁的文本,它可以在所有不同的流行浏览器上运行?(比如6,Mozilla Firefox,Google Chrome Safari,Opera。)

EN

回答 10

Stack Overflow用户

回答已采纳

发布于 2011-11-30 05:46:34

这可以使用CSS3来实现,如下所示

代码语言:javascript
复制
@-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在内部有点哭。

票数 43
EN

Stack Overflow用户

发布于 2013-06-20 08:41:11

真正的跨浏览器/传统浏览器闪烁标记...

HTML

代码语言:javascript
复制
<!DOCTYPE html>
<html>
<blink>ULTIMATE BLINK TAG!</blink>

<!--[if lt IE 10]>
<script>

toggleItem = function(){
    var el = document.getElementsByTagName('blink')[0];
    if (el.style.display === 'block') {
        el.style.display = 'none';
    } else {
        el.style.display = 'block';
    }
}

setInterval(toggleItem, 1000);

</script>
<![endif]-->

</html>

CSS

代码语言:javascript
复制
blink {
  -webkit-animation: blink 1s steps(5, start) infinite;
  -moz-animation:    blink 1s steps(5, start) infinite;
  -o-animation:      blink 1s steps(5, start) infinite; 
  animation:         blink 1s steps(5, start) infinite;
}

@-webkit-keyframes blink {
  to { visibility: hidden; }
}
@-moz-keyframes blink {
  to { visibility: hidden; }
}
@-o-keyframes blink {
  to { visibility: hidden; }
}
@keyframes blink {
  to { visibility: hidden; }
}
票数 11
EN

Stack Overflow用户

发布于 2013-08-12 06:32:16

代码语言:javascript
复制
var el = $(".blink");
setInterval(function() {el.toggle()}, 500);
票数 5
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/4894488

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档