logo标签列表

<blink>的替代方案

html
74

闪烁标签<blink>从未成为正式的标准，在现代浏览器中已被完全弃用。

有没有符合标准的方法让文本闪烁？

9
JavaScript 万能！ - HamZa
2
请不要使用那个，请。如果你真的，真的...非常需要使用它，可以随意在新的CSS或Javascript/jQuery中实现它。甚至有一个为此制作的闪烁插件。 - OzrenTkalcecKrznaric
6
我曾经读过一篇文章，说闪烁文本之所以被添加到Netscape浏览器中是出于玩笑。 - DwB
2
尽管它看起来很花哨，但仍然可以用于诸如在视觉上声明用户正在使用站点的暂存/测试版本而不是生产版本等方面。 - emurano
1
是的，<blink>最初是作为一个玩笑而构思出来的。请参见此处：montulli.org。 - David R Tribble
显示剩余4条评论
14个回答
92

.blink_text
{
    animation:1s blinker linear infinite;
    -webkit-animation:1s blinker linear infinite;
    -moz-animation:1s blinker linear infinite;
    color: red;
}

@-moz-keyframes blinker
{  
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
}

@-webkit-keyframes blinker
{  
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
}

@keyframes blinker
{  
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
 }
    <span class="blink_text">India's Largest portal</span>

2
这太棒了！ - Souvik Ray
你可以使用“无限交替”代替，并删除50%的关键帧。只需0％{不透明度：0} 100％{不透明度：1}。 - Charles Robertson
29
8
谢谢，JavaScript的东西起作用了！“不，没有。” 这符合标准，对吧？我的意思是，它是JavaScript... - jobukkit
13

不，HTML中没有这个元素。开发人员之所以费尽心思删除一个实现时间长达十年的元素，是有充分的理由的。

话虽如此……您可以使用CSS动画模拟它, 但如果我是您，我不会冒险滥用CSS动画而导致其被禁止 :)

以下是关于 CSS3 动画制作文本闪烁的例子 - http://googlesystem.blogspot.co.uk/2014/02/googles-blink-easter-egg.html - John
6
“好的理由”是什么？我计划在读取服务器上安装的rpm软件包的版本信息时使用它，即“检索数据 - 请稍候”。以那种方式使用闪烁文本有问题吗？ - CramerTV
4
请尝试使用这个方法，我保证它会有效。
  <script type="text/javascript">
  function blink() {
  var blinks = document.getElementsByTagName('blink');
  for (var i = blinks.length - 1; i >= 0; i--) {
  var s = blinks[i];
  s.style.visibility = (s.style.visibility === 'visible') ? 'hidden' : 'visible';
}
window.setTimeout(blink, 1000);
}
if (document.addEventListener) document.addEventListener("DOMContentLoaded", blink, false);
else if (window.addEventListener) window.addEventListener("load", blink, false);
else if (window.attachEvent) window.attachEvent("onload", blink);
else window.onload = blink;

然后将以下内容放在下方：

<blink><center> Your text here </blink></div>
是的，这个可以工作，但可以改进。1）您不需要每次使用 getElementsByTagName 查询 blinks 标签。实际上，您只需查询一次，因为它会自动更新（简而言之：在循环外声明该变量一次即可）。2）函数 > 超时 > 函数 > 超时 > ... 它非常深入，一个简单的 setInterval 应该就可以了。（附注：使用反向 for 循环是个好主意）给你点赞，因为这段恶魔代码值得。 - Sabaz
3
"blink"元素已经被浏览器放弃：Firefox支持到22版本，Opera支持到12版本。
HTML5 CR是第一个提到"blink"的草案规范，它将其声明为“过时”，但在Rendering部分描述了其“预期呈现”的规则。请注意保留HTML标记。
blink { text-decoration: blink; }

并建议使用CSS替换该元素。实际上，有几种用CSS和JavaScript模拟blink的替代方法，但是提到的规则是最简单的：为了提供与blink元素的CSS对应项，定义了text-decoration的值blink。然而，它的支持似乎像blink元素一样有限。
如果您真的想以跨浏览器的方式使内容闪烁，可以使用简单的JavaScript代码，在定时方式下将内容更改为不可见，再变回可见等。为了获得更好的效果，您可以使用CSS动画，但其浏览器支持略有限制。
4
Pssht... 这个例子是一个动画GIF ;) - Thomas
3
“<blink>”和“text-decoration: blink”在Firefox 23中被移除了（技术上，后者被认可但被忽略），该版本于昨天发布。因此，即使HTML5建议将该声明应用于“<blink>”元素，但在最新的浏览器中，它很可能实际上不会生效。 - BoltClock
感谢您的评论。我已经编辑了答案。动态GIF真的让我困惑了。 - Jukka K. Korpela
浏览器已经完全放弃了 blink 元素：Firefox 支持到版本 22，而当前版本（12.51）的 Opera 仍然支持。Opera 的当前版本是 Opera 15，Opera 15 也不再支持它。从 Firefox 自版本 23 开始不再支持它的消息是我了解 blink 标签存在的方式。该示例确实是一个动画 GIF ;) - jobukkit
哎呀，我的意思是元素尚未被浏览器完全弃用。关于Opera，我被浏览器自己的更新功能误导了：它更新到了12“系列”的最新（也许是最后一个）版本，但最新版本确实是15。所以我会再次修改答案。 - Jukka K. Korpela
2

blink 标签已经被弃用，其效果已经有些老旧。当前的浏览器不再支持它。无论如何，如果你需要闪烁的效果，你应该使用 JavaScript 或 CSS 解决方案。

CSS 解决方案

blink {
    animation: blinker 0.6s linear infinite;
    color: #1c87c9;
}
@keyframes blinker {  
    50% { opacity: 0; }
}
.blink-one {
    animation: blinker-one 1s linear infinite;
}
@keyframes blinker-one {  
    0% { opacity: 0; }
}
.blink-two {
    animation: blinker-two 1.4s linear infinite;
}
@keyframes blinker-two {  
    100% { opacity: 0; }
}
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h3>
      <blink>Blinking text</blink>
    </h3>
    <span class="blink-one">CSS blinking effect for opacity starting with 0%</span>
    <p class="blink-two">CSS blinking effect for opacity starting with 100%</p>
  </body>
</html>

sourse: HTML blink Tag

2
您可以利用JavaScript的setInterval函数： 

const spanEl = document.querySelector('#spanEl');
var interval = setInterval(function() {
  spanEl.style.visibility = spanEl.style.visibility === "hidden" ? 'visible' : 'hidden';
}, 250);
<span id="spanEl">This text will blink!</span>

2

只使用HTML和CSS实现文本闪烁

<span class="blinking">I am blinking!!!</span>
现在是 CSS 代码：
    .blinking{
        animation:blinkingText 0.8s infinite;
    }

    @keyframes blinkingText{
        0%{     color: #000;    }
        49%{    color: transparent; }
        50%{    color: transparent; }
        99%{    color:transparent;  }
        100%{   color: #000;    }
    }
1

HTML 代码

<span class="blinking">Am I blinking?</span>

CSS 代码 

.blinking{
    animation:blinkingText 1.2s infinite;
}
@keyframes blinkingText{
    0%{     color: #000;    }
    49%{    color: #000; }
    60%{    color: transparent; }
    99%{    color:transparent;  }
    100%{   color: #000;    }
}
<span class="blinking">Am I blinking?</span>

Ref:https://html-online.com/articles/blinking-text-css-animation/

1
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接