HTML как увеличить <blink>время мигания тега - PullRequest
0 голосов
/ 22 декабря 2018

Как увеличить время исчезновения html тега мигания

 <blink>
     <i class="fa fa-phone"></i>
     +01 0000 111 111
 </blink>

, используя только html

Ответы [ 2 ]

0 голосов
/ 22 декабря 2018

Поскольку <blink> устарело, его не следует использовать, поскольку некоторые браузеры могут не поддерживать его.Но если вам все еще нужен эффект мерцания, вы можете сделать простые анимации CSS и затем добавить эту анимацию к элементу, который хотите сделать миганием.

Вот пример такой анимации

@keyframes blink_effect {
    0% {
        visibility: hidden;
    }
    50% {
        visibility: hidden;
    }
    100% {
        visibility: visible;
    }
}

А затем вы можете добавить эту анимацию, например, к классу

.blink {
    animation: .1s blink_effect infinite
}

@keyframes blink_effect {
  0% {
    visibility: hidden;
  }
  50% {
    visibility: hidden;
  }
  100% {
    visibility: visible;
  }
}

.blink {
  animation: .1s blink_effect infinite
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<div class="blink"><i class="fa fa-phone"></i>+01 0000 111 111</div>
0 голосов
/ 22 декабря 2018

HTML-тег blink устарел.Более того, метод blink () не является стандартным и может работать не так, как ожидается во всех браузерах.Вы можете использовать JavaScript для вашего требования.

function blink() {
  setInterval(function() {
    document.getElementById("blink").style.webkitTransitionDuration = "0.5s";
    document.getElementById("blink").style.opacity = 0;
    setTimeout(function() {
      document.getElementById("blink").style.webkitTransitionDuration = "0.5s";
      document.getElementById("blink").style.opacity = 1;
    }, 500);
  }, 1500);
}
blink();
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<div id="blink"><i class="fa fa-phone"></i>+01 0000 111 111</div>

Здесь вы также можете изменить продолжительность.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...