w3docs logo

HTML тег <blink>

Тег <blink> используется для установки мигания текста.

Тег <blink> больше не используется. Для достижения подобного эффекта вы можете использовать комбинацию CSS and JavaScript.

Синтаксис

Тег <blink> - парный, закрывающий элемент (</blink>) обязателен.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
  </head>
  <body>
    <h1>Элемент &lt;blink&gt;</h1>
    <blink>Элемент &lt;blink&gt; элемент устарел. Чтобы достичь эффекта мигания, вы должны использовать CSS или JavaScript. См. Примеры в следующем разделе. </blink>
  </body>
</html>

Результат

Элемент blink

Мигающий текст с помощью CSS

Чтобы достичь эффекта мигания, вы можете использовать свойство CSS animation, определенное с помощью правила @keyframes.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      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; }
       }
    </style>
  </head>
  <body>
    <h3>
       <blink>Мигающий текст</blink>
      <br />
      <span class="blink">Мигающий текст с использованием класса CSS </span>
   </body>
</html>

Текст в данном примере исчезает, а затем появляется снова. С помощью CSS-кода можно также изменить внешний вид мигающего текста.

Мигающий текст с помощью JavaScript

Вы также можете использовать скрипты, чтобы элемент мигал.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
  </head>
  <body>
    <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;
    </script>
    <blink style="color: #1c87c9;">Мигающий эффект с JavaScript</blink>
  </body>
</html>

В вышеупомянутом примере скрипт установлен, чтобы скрыть текст, когда он появляется, и заставить его появляться, когда он исчезает, тем самым достигая мигающего эффекта.

Поддержка браузера

chrome edge firefox safari opera
✕ ✕ ✕ ✕ ✕

Практикуйте свои знания

Каковы характеристики HTML-тега <blink>?
Считаете ли это полезным?