如何增加<blink>标签闪烁时间

Question

如何增加html闪烁标记淡出时间

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

只使用html

Answer 1

HTML‘眨眼’标记已经过时。此外，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>

​

在这里，您也可以更改持续时间。

Answer 2

由于不推荐使用<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>

​