<blink>的替代

68

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

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

html 
— stommestack
source
8
Javascript简直是万物！
— HamZa 2013年
2
请不要使用它。如果您确实要使用它，请随时在新的CSS或Javascript / jQuery中实现它。甚至为此做了一个眨眼插件。
— OzrenTkalcecKrznaric 2013年
6
我曾经读过，眨眼作为笑话被添加到了netscape中。
— 2013年
2
华丽夺目，因为它是它可能仍然是有用的东西像在视觉上宣布，用户使用网站的分期/测试版本，而不是量产版等
— emurano
1
是的，<blink>最初被认为是个玩笑。看到这里：montulli.org。
— David R Tribble

Answers:

86 

.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>
展开摘要

— 埃兰戈万
source
1
这是太棒了！
— Souvik Ray，
13

不，HTML中没有。有一个很好的理由，为什么开发人员会选择放弃对某个元素的支持，而该元素的实现在过去的十多年中一直未受影响。

就是说...您可以使用CSS动画来模拟它，但是如果我是您，我不会冒因以这种方式被滥用而使CSS动画被砍掉的风险:)

— BoltClock
source
请参阅此示例，了解用于闪烁文本的CSS 3动画示例-googlesystem.blogspot.co.uk/2014/02/…–
— 约翰
5
那“好理由”是什么？我计划在读取服务器上已安装的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>
— 鲁鲁
source
是的，这可行，但是可以改进。1）您不需要blinks每次都使用来查询标签getElementsByTagName。实际上，您只可以查询一次，因为它将自行自动更新（简而言之：一次在循环外声明该变量），2）function> timeout> function> timeout> ..它的含义非常深，setInterval应该简单好。（使用反向for循环的优点）是我对这个邪恶代码的支持；）
— Sabaz
3

该blink元素已被浏览器放弃：Firefox最高支持版本22，Opera最高支持版本12。

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

blink { text-decoration: blink; }

并建议使用CSS替换该元素。实际上，有几种替代的blink在CSS和JavaScript中进行仿真的方式，但是提到的规则是最简单的：blink为text-decoration定义的值是专门为blink元素提供CSS对应的。但是，对此blink元素的支持似乎受到限制。

如果您确实想使内容以跨浏览器的方式闪烁，则可以使用例如简单的JavaScript代码，以定时方式将内容更改为不可见，变回可见等。为了获得更好的结果，您可以使用CSS动画，但对浏览器的支持要有限得多。

— Jukka K.Korpela
source
4
Pssht ...示例是GIF动画；）
— Thomas
3
<blink>并text-decoration: blink在昨天发布的Firefox 23中被删除（从技术上讲，后者可以识别但被忽略了）。因此，即使HTML5表示要将声明应用于<blink>元素，也有可能实际上不会在最新的浏览器中生效。
— BoltClock
感谢您的评论。我已经编辑了答案。动画GIF确实欺骗了我。
— Jukka K.
“眨眼元素已经被浏览器完全抛弃了：Firefox最多支持22版，而Opera的当前版本（12.51）仍然支持。” Opera的当前版本是Opera 15，而Opera 15也不再支持它。自版本23起，Firefox不再支持该消息的消息使我了解了该blink标记的存在。这个例子的确是一个动画GIF；）
— stommestack 2013年
哎呀，我的意思写的元素已没有（还）完全被抛弃的浏览器。关于Opera，我被浏览器自身的更新功能误导了：它已更新为12个“系列”中的最新（最新？）版本，但最新版本的确是15。因此，我将再次修改答案。
— Jukka K. Korpela
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>
展开摘要

— 汤姆·O
source
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;    }
    }
— 法里杜尔汗
source
2

不推荐使用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闪烁标签

— 瓦兹根·曼努克扬（Vazgen Manukyan）
source
0

一个小的javascript片段来模仿眨眼，甚至不需要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>
— 拉胡
source
1
我们应该使用甚至不需要js的代码。
— Shyam'1
0

下面的解决方案很有趣，因为它可以同时应用于多个元素，并且当页面上不再存在该元素时也不会触发错误。秘密在于，它被称为传递参数的函数，在该函数中您必须返回要受到闪烁影响的元素。然后，每次闪烁都会调用此功能。下面的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>
— 丹尼尔
source
0

可以用这个

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

.blinking
{
    animation:blinkingText 2s reverse infinite;
}
— 阿里·巴格里（Ali Bagheri）
source
-1

这是一些代码，可以代替眨眼标签

<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>
— 用户名
source
-1

这是一个满足您需求的Web组件：blink-element。
您只需将内容包装在中<blink-element>。

<blink-element>
    <!-- Blinking content goes here -->
</blink-element>
— 瓦哈哈特
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.