<blink>

HTML <Blink> Tag

The <blink> tag was an HTML element used to create blinking text on a webpage. This tag was deprecated in HTML 4.0 and is not supported by modern browsers. It was widely considered to be a bad design choice and was often associated with poor user experience.

Since the <blink> tag is no longer in use, it is recommended to achieve similar effects using CSS or JavaScript. However, keep in mind that blinking or rapidly changing content can be annoying or distracting to users and may not comply with accessibility guidelines.

The <blink> is a deprecated HTML tag. Though some browsers may still have <blink> support, it is in the process of being dropped. Don’t use this element, otherwise, your pages can be broken. You can use CSS and JavaScript instead to create a blink effect.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      blink {
        color: #1c87c9;
        font-size: 20px;
        font-weight: bold;
        font-family: sans-serif;
      }
    </style>
  </head>
  <body>
    <h1>The &lt;blink&gt; Element </h1>
    <blink>The &lt;blink&gt; element is deprecated. To attain blinking effect you should use CSS or JavaSrcipt. See examples in the next section.</blink>
  </body>
</html>

Blinking Effect with CSS

Blinking Effect with CSS

Another way to accomplish the blink effect was to use set the blink keyword of CSS text-decoration property.

Example of blinking effect with CSS3 animation:

<!DOCTYPE html>
<html>
<head>
<style>
  .blink {
    animation: blinker 1s linear infinite;
  }

  @keyframes blinker {
    50% {
      opacity: 0;
    }
  }
</style>
</head>
<body>

<h1 class="blink">Blinking Text Example</h1>

</body>
</html>

However, the blink keyword of the text-decoration property is not part of the CSS specification and not supported on most browsers.

An alternative way to attain the blinking effect you can use CSS3 animation property defined with @keyframes rule.

Example of blinking effect with the CSS text-decoration property:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .blink {
        text-decoration: blink;
        color: #1c87c9;
        font-size: 30px;
        font-weight: bold;
        font-family: sans-serif;
      }
    </style>
  </head>
  <body>
    <p class="blink">This text may blink depending on the browser you use.</p>
  </body>
</html>

Blinking Effect with JavaScript

Blinking Effect with JavaScript

You can also use scripts to make the element blink.

Example of blinking effect with JavaScript:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #blink {
        font-size: 30px;
        font-weight: bold;
        font-family: sans-serif;
        color: #1c87c9;
        transition: 0.4s;
      }
    </style>
  </head>
  <body>
    <p id="blink">Blinking Effect with JavaScript</p>
    <script type="text/javascript">
      var blink = document.getElementById('blink');
      setInterval(function() {
        blink.style.opacity = (blink.style.opacity == 0 ? 1 : 0);
      }, 1000);
    </script>
  </body>
</html>


请遵守《互联网环境法规》文明发言,欢迎讨论问题
扫码反馈

扫一扫,反馈当前页面

咨询反馈
扫码关注
返回顶部