Question

我有一个带有gif图片的div容器。我想闪烁这个gif，但gif只是显示而且没有闪烁

  function blink() {
      time2 = time2 - 1;
      if (time2 >= 0) {
          var ani = setInterval(blinkerle() {
              if (document.getElementById(risiko1).style.visibility == "visible") {
                  document.getElementById(risiko1).style.visibility = "hidden";
              } else {
                  document.getElementById(risiko1).style.visibility = "visible";
              }
          }, 1000);

      }
  }

通过blink();

调用该函数

来自其他地方。谢谢你的帮助

Answer 1

您可以使用纯CSS实现此目的：

div {
  display: block;
  position: relative;
  top: 5px;
  width: 200px;
  height: 50px;
  background-image: url("http://cdn.sstatic.net/stackoverflow/img/sprites.png");
  background-position: top left;
  background-repeat: no-repeat;
  text-indent: -999em;
}
/** the blink css is below this comment: **/
.blink {
  animation: blink-animation 1s steps(5, start) infinite;
  -webkit-animation: blink-animation 1s steps(5, start) infinite;
}
@keyframes blink-animation {
  to {
    visibility: hidden;
  }
}
@-webkit-keyframes blink-animation {
  to {
    visibility: hidden;
  }
}

<div class="blink"></div>

CSS taken from here

Answer 2

你在blinkerle（）函数前面缺少function关键字。它应该是：

 var ani = setInterval(function blinkerle(){

或者最好使用匿名函数：

 var ani = setInterval(function() {

使用javascript - 计时器闪烁gif

2 个答案: