<blink>在現代瀏覽器？

Question

我正在開展一個項目，為我們的CS教員創建一個網站。 但是有一個問題。 我們希望頁面上的某些元素以有意義的方式突出顯示。 解決方案必須是跨瀏覽器（即必須在IE中工作）。

因此，一個問題：

如何在現代瀏覽器中模擬blink （在IE6中完美運行）（想想Chrome）？

更新：我發現這個jQuery插件可以實現閃爍，但是我們不使用jQuery，而且更喜歡現代瀏覽器的CSS3后備。

Answer 1

我想知道為什么沒有人建議CSS3動畫 ：

@keyframes blink {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.blink {
  animation: blink 600ms infinite;
}

演示JSBin 。

Answer 2

您可以為此目的使用CSS text-decoration屬性：

例如：

span {
    text-decoration: blink;
}

讓所有span nodes閃爍..閃爍..閃爍..閃爍..

Answer 3

這是一些模擬<blink> JavaScript：

var blink = (function () {
  var elems;

  function blink() {
    for (var i = 0; i < elems.length; i++) {
      var visible = elems[i].style.visibility === 'visible';
      elems[i].style.visibility = visible ? 'hidden' : 'visible';
    }
  }

  this.start = function () {
    elems = document.getElementsByClassName('blink');
    setInterval(blink, 500);
  };

  return { start: start };
}());

addEventListener('load', blink.start);

CodePen演示

只需將類blink添加到任何元素即可。

Answer 4

你不必上課。 使用傳統標簽，只需為其添加CSS。

通過Straight CSS：

/* Standard (Mozilla) */
@keyframes blink { from { opacity: 1; } to { opacity: 0; } }
/* Chrome & Safari */
@-webkit-keyframes blink { from { opacity: 1; } to { opacity: 0; } }
blink { -webkit-animation: blink 600ms infinite; animation: blink 600ms infinite; }

直接CSS通過JS添加

if ("[object HTMLUnknownElement]" === Object.prototype.toString.call(document.createElement('blink'))) {
    var head = document.head || document.getElementsByTagName("head")[0],
        style = document.createElement("style");
    /* Standard (Mozilla) */
    style.appendChild(document.createTextNode("@keyframes blink { from { opacity: 1; } to { opacity: 0; } }"));
    /* Chrome & Safari */
    style.appendChild(document.createTextNode("@-webkit-keyframes blink { from { opacity: 1; } to { opacity: 0; } }"));
    style.appendChild(document.createTextNode("blink { -webkit-animation: blink 600ms infinite; animation: blink 600ms infinite; text-decoration: blink; }"));
    head.appendChild(style);
}

---

 /* Standard (Mozilla) */ @keyframes blink { from { opacity: 1; } to { opacity: 0; } } /* Chrome & Safari */ @-webkit-keyframes blink { from { opacity: 1; } to { opacity: 0; } } blink { -webkit-animation: blink 600ms infinite; animation: blink 600ms infinite; } 

 <p><blink>I Blink</blink></p> <hr /> <p><noblink>I don't</noblink></p> 

Answer 5

只是一句話：如果你想“眨眼”一個鏈接，最好更改眨眼文本的顏色而不是隱藏它，因為當它被隱藏時你不能點擊它，所以它變成了一個試圖點擊的游戲鏈接 ：-）

function toggleBlink() {
    for(var i = 0; i < blinkers.length; i++) {
        if(blinkers[i].style.color == 'red') {
            blinkers[i].style.color = 'white';
        } else {
            blinkers[i].style.color = 'red';
        }
    }
}

//“白色”是我背景的顏色