72

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

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

4

14 回答 14

90 

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

于 2014-05-30T09:43:43.603 回答
28

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

于 2013-08-07T13:49:43.153 回答
13

不，HTML 中没有。开发人员选择不遗余力地删除对一个元素的支持是有充分理由的，该元素的实现在十多年来都没有受到影响。

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

于 2013-08-07T13:48:38.853 回答
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>
于 2015-12-12T07:09:40.700 回答
3

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

HTML5 CR是第一个提到blink.

blink { text-decoration: blink; }

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

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

于 2013-08-07T18:05:14.233 回答
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>

于 2019-01-06T00:50:10.450 回答
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;    }
    }
于 2019-01-16T12:42:51.807 回答
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 闪烁标签

于 2019-10-14T20:58:13.120 回答
1

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

于 2014-02-22T19:41:12.257 回答
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>
于 2014-06-30T16:55:55.353 回答
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>
于 2019-01-06T00:17:01.973 回答
0

可以用这个

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

.blinking
{
    animation:blinkingText 2s reverse infinite;
}
于 2019-04-06T08:10:24.540 回答
0

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>

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

于 2021-11-17T05:52:12.997 回答
-1

这里有一些代码可以代替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>
于 2016-07-25T20:28:36.740 回答