<blink> 的替代品答案

【问题标题】：Alternative for <blink><blink> 的替代品
【发布时间】：2013-08-07 13:46:29
【问题描述】：

The <blink> tag 从来都不是官方标准，现在已被所有浏览器完全抛弃。

是否有符合标准的方式使文本闪烁？

【问题讨论】：

Javascript 一切！
请不要使用它。如果你真的，真的......真的必须使用它，请随意在新的 CSS 或 Javascript/jQuery 中实现它。甚至还有blink plugin made for that。
我曾经读到过在netscape中加入blink是一个玩笑。
尽管它很花哨，但它仍然可以用于视觉上声明用户正在使用站点的暂存/测试版本而不是生产版本等。
是的，<blink> 最初被认为是一个笑话。见这里：montulli.org.

标签： html

【解决方案1】：

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

    &lt;span class="blink_text"&gt;India's Largest portal&lt;/span&gt;

【讨论】：

这太棒了！
您可以改用“无限交替”并删除 50% 的关键帧。仅 0% {opacity: 0} 100%{opacity:1}

【解决方案2】：

不，没有。维基百科对此有一篇很好的文章，并提供了使用 JavaScript 和 CSS 的替代方法：http://en.wikipedia.org/wiki/Blink_element

【讨论】：

感谢 Javascript 的工作！ “不，没有”这是符合标准的不是吗？我的意思是，它是 Javascript...

【解决方案3】：

不，HTML 中没有。开发人员选择不遗余力地取消对一个元素的支持，而该元素的实现在过去十年以上都没有受到影响，这是有充分理由的。

也就是说...你可以emulate it using a CSS animation，但如果我是你，我不会冒着 CSS 动画因为被这种方式滥用而被砍掉的风险 :)

【讨论】：

查看这个用于闪烁文本的 css 3 动画示例 - googlesystem.blogspot.co.uk/2014/02/…
那个“好理由”是什么？我打算在读取服务器上安装的 rpm 包的版本信息时使用它，即“检索数据 - 待机”。以这种方式使用闪烁文本有什么问题吗？

【解决方案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）函数 > 超时 > 函数 > 超时 > .. 它非常深入，一个简单的@987654325 @应该不错。（ps。使用反向 for 循环的好处）为这个邪恶的代码投票；）

【解决方案5】：

blink 元素正在被浏览器抛弃：Firefox 支持到版本 22，Opera 支持到版本 12。

HTML5 CR 是第一个提到 blink 的规范草案，将其声明为“已过时”，但使用规则描述（在 Rendering 部分中）其“预期呈现”

blink { text-decoration: blink; }

并建议使用 CSS 替换该元素。实际上，在 CSS 和 JavaScript 中模拟 blink 有几种替代方法，但提到的规则是最直接的一种：text-decoration 的值 blink 是专门为 blink 元素提供 CSS 对应项而定义的。但是，对它的支持似乎与blink 元素一样有限。

如果你真的想让内容以跨浏览器的方式闪烁，你可以使用例如以定时方式将内容更改为不可见、变回可见等的简单 JavaScript 代码。为获得更好的效果，您可以使用 CSS 动画，但浏览器支持更有限。

【讨论】：

Pssht...示例是动画 GIF ;)
<blink> 和 text-decoration: blink 在昨天发布的 Firefox 23 中被删除（从技术上讲，后者被识别但被忽略）。因此，即使 HTML5 说要将该声明应用于 <blink> 元素，它也很可能不会在最新的浏览器中真正生效。
感谢 cmets。我已经编辑了答案。动画 GIF 真的欺骗了我。
"blink 元素已被浏览器完全抛弃：Firefox 支持它直到版本 22，而当前版本 (12.51) 的 Opera 仍然支持。" Opera 的当前版本是 Opera 15，Opera 15 也不再支持它。 Firefox 自 23 版以来不再支持它的消息是我了解blink 标签存在的方式。这个例子确实是一个动画 GIF ;)
糟糕，我的意思是说元素还没有（还）被浏览器完全抛弃。 Re Opera，我被浏览器自带的更新功能误导了：它更新到了12个“系列”中的最新（最后一个？）版本，但最新版本确实是15。所以我再次修改答案。

【解决方案6】：

您可以利用 JavaScript 的 setInterval 函数：

const spanEl = document.querySelector('#spanEl');
var interval = setInterval(function() {
  spanEl.style.visibility = spanEl.style.visibility === "hidden" ? 'visible' : 'hidden';
}, 250);

&lt;span id="spanEl"&gt;This text will blink!&lt;/span&gt;

【讨论】：

【解决方案7】：

仅使用 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;    }
    }

【讨论】：

【解决方案8】：

blick 标记已弃用，效果有点陈旧 :) 当前浏览器不再支持它。无论如何，如果您需要闪烁效果，您应该使用 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>

来源：HTML blink Tag

【讨论】：

【解决方案9】：

如果您希望为自己的浏览重新启用闪烁标签，您可以安装我写的这个简单的 Chrome 扩展程序：https://github.com/etlovett/Blink-Tag-Enabler-Chrome-Extension。它只是使用 setInterval 隐藏和显示每个页面上的所有标签。

【讨论】：

【解决方案10】：

一个模仿眨眼的小javascript sn-p，甚至不需要css

<span id="lastDateBlinker">
    Last Date for Participation : 30th July 2014
</span>

<script type="text/javascript">
    function blinkLastDateSpan() {
        if ($("#lastDateBlinker").css("visibility").toUpperCase() == "HIDDEN") {
            $("#lastDateBlinker").css("visibility", "visible");
            setTimeout(blinkLastDateSpan, 200);
        } else {
            $("#lastDateBlinker").css("visibility", "hidden");
            setTimeout(blinkLastDateSpan, 200);
        }
    }
    blinkLastDateSpan();
</script>

【讨论】：

我们应该使用甚至不需要js的。

【解决方案11】：

下面的解决方案很有趣，因为它可以同时应用于多个元素，并且当元素不再存在于页面上时不会触发错误。秘密在于它被称为作为参数传递一个函数，您必须在该函数中返回您希望受闪烁影响的元素。然后每次闪烁都会回调此函数。 HTML 文件如下：

<!doctype>
<html>
    <head>
        <style>
            .blink {color: red}
        </style>
    </head>
    <body>
        <h1>Blink test</h1>
        <p>
            Brazil elected President <span class="blink">Bolsonaro</span> because he 
            was the only candidate who did not promise <span class="blink">free things</span>
            to the population. Previous politicians created an image that would 
            bring many benefits, but in the end, the state has been getting more and 
            more <span class="blink">burdened</span>. Brazil voted for the 
            realistic idea that <span class="blink">there is no free lunch</span>.
        </p>
    </body>
    <script>
    var blink =
        {
            interval_in_miliseconds:
                400,
            on:
                true,
            function_wich_returns_the_elements: 
                [],
            activate:
                function(function_wich_returns_the_elements)
                {
                    this.function_wich_returns_the_elements = function_wich_returns_the_elements;
                    setInterval(blink.change, blink.interval_in_miliseconds);
                },
            change:
                function()
                {   
                    blink.on = !blink.on;
                    var i, elements = [];
                    for (i in blink.function_wich_returns_the_elements)
                    {
                        elements = elements.concat(blink.function_wich_returns_the_elements[i]());
                    }
                    for (i in elements)
                    {
                        if (elements[i])
                        {
                            elements[i].style.opacity = blink.on ? 1 : .2;
                        }
                    }
                }
        };
    blink.activate
    (
        [
            function()
            {
                var 
                    i,
                    node_collection = document.getElementsByClassName('blink'),
                    elements = [];
                for (i = 0; i < node_collection.length; i++)
                {
                    elements.push(node_collection[i]);
                }
                return elements;
            }
        ]
    );
    </script>
</html>

【讨论】：

【解决方案12】：

可以用这个

@keyframes blinkingText
{
    0%{     opacity: 1;    }
    40%{    opacity: 0; }
    60%{    opacity: 0; }
    100%{   opacity: 1;    }
}

.blinking
{
    animation:blinkingText 2s reverse infinite;
}

【讨论】：

【解决方案13】：

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

&lt;span class="blinking"&gt;Am I blinking?&lt;/span&gt;

参考：https://html-online.com/articles/blinking-text-css-animation/

【讨论】：

【解决方案14】：

这里有一些代码可以代替blink标签

<p id="blink">This text will blink!</p>
<script>
var blacktime = 1000;
var whitetime = 1000;
//These can be as long as you desire in milliseconds
setTimeout(whiteFunc,blacktime);
function whiteFunc(){
    document.getElementById("blink").style.color = "white";
    setTimeout(blackFunc,whitetime);
}
function blackFunc(){
    document.getElementById("blink").style.color = "black";
    setTimeout(whiteFunc,blacktime);
}
</script>

【讨论】：