发表新帖
发表新帖

Alternative for <blink>

后端 未结
关注
14 2189
广开言路
广开言路 2020-11-27 06:39

The tag was never an official standard, and is now completely abandoned by all browsers.

Is there a standards compliant way of making text blink?

相关标签:
14条回答
  • 故里飘歌
    2020-11-27 06:59

    Blinking text with HTML and CSS only

    <span class="blinking">I am blinking!!!</span>

    And Now CSS code

        .blinking{
        animation:blinkingText 0.8s infinite;
    }

    @keyframes blinkingText{
        0%{     color: #000;    }
        49%{    color: transparent; }
        50%{    color: transparent; }
        99%{    color:transparent;  }
        100%{   color: #000;    }
    }
    0 讨论(0)
  • 时光取名叫无心
    2020-11-27 07:00

    If you're looking to re-enable the blink tag for your own browsing, you can install this simple Chrome extension I wrote: https://github.com/etlovett/Blink-Tag-Enabler-Chrome-Extension. It just hides and shows all <blink> tags on every page using setInterval.

    0 讨论(0)
  • 星月不相逢
    2020-11-27 07:00

    A small javascript snippet to mimic the blink , no need of css even

    <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>
    0 讨论(0)
  • 不思量自难忘°
    2020-11-27 07:07

    The blink element is being abandoned by browsers: Firefox supported it up to version 22, and Opera up to version 12.

    The HTML5 CR, which is the first draft specification that mentions blink, declares it as “obsolete” but describes (in the Rendering section) its “expected rendering” with the rule

    blink { text-decoration: blink; }

    and recommends that the element be replaced by the use of CSS. There are actually several alternative ways of emulating blink in CSS and JavaScript, but the rule mentioned is the most straightforward one: the value blink for text-decoration was defined specifically to provide a CSS counterpart to the blink element. However, support to it seems to be as limited as for the blink element.

    If you really want to make content blink in a cross-browser way, you can use e.g. simple JavaScript code that changes content to invisible, back to visible etc. in a timed manner. For better results you could use CSS animations, with somewhat more limited browser support.

    0 讨论(0)
  • 天涯浪人
    2020-11-27 07:08

    The blick tag is deprecated, and the effect is kind of old :) Current browsers don't support it anymore. Anyway, if you need the blinking effect, you should use javascript or CSS solutions.

    CSS Solution

    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

    0 讨论(0)
  • Happy的楠姐
    2020-11-27 07:08

    Here is a web-component that fits your need: blink-element.
    You can simply wrap your content in <blink-element>.

    <blink-element>
    <!-- Blinking content goes here -->
</blink-element>
    0 讨论(0)
 看不清?
提交回复
热议问题