闪烁文本跨浏览器

Question

闪烁文本跨浏览器

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

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

然后我尝试了CSS:

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

Run Code Online (Sandbox Code Playgroud)

它不适用于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>

Run Code Online (Sandbox Code Playgroud)

现在它不适用于Safari或Chrome.

任何人都可以帮我使用闪烁的文本,它将在所有不同的流行浏览器上运行吗？(IE 6,Mozilla Firefox,谷歌Chrome Safari,Opera.)

Answer 1

Jes*_*ugh 40

这可以通过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;
}

Run Code Online (Sandbox Code Playgroud)

它甚至具有很好的淡化效果.在Safari中运行良好,但Chrome在内部有点哭.

得到它了!当我将关键帧设置为'0%{不透明度:1.0; 50%{不透明度:0.0; } 100%{不透明度:1.0; }`和元素的计时功能到`steps(1)`,它按预期处理:) (3认同)
@arkanciscan:如果您出于教育目的复制其他作者的代码,请提供您从哪里获取代码.例如,有了这个答案,您可能没有自己编写,所以如果这是真的,请更新您的答案并提供参考. (3认同)

Answer 2

bke*_*ren 11

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

HTML

<!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>

Run Code Online (Sandbox Code Playgroud)

CSS

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

Run Code Online (Sandbox Code Playgroud)

Answer 3

小智 5

var el = $(".blink");
setInterval(function() {el.toggle()}, 500);

Run Code Online (Sandbox Code Playgroud)

`setInterval(el.toggle,500);` (3认同)
这很糟糕,因为当隐藏元素时,布局将受到影响,整个页面可能会移动. (2认同)

归档时间：	15 年，4 月前
查看次数：	69732 次
最近记录：	9 年，4 月前