现代浏览器中的<blink>？

Question

我正在做一个项目，为我们的CS教员创建一个网站。不过有一个问题。我们希望页面上的某些元素以有意义的方式突出显示。解决方案必须是跨浏览器的(即必须在IE中工作)。

因此，有一个问题：

如何在现代浏览器(如Chrome)中模仿blink (在IE6中工作得很好)？

更新:我发现这个jQuery插件可以闪烁，但是我们不使用jQuery，我们更喜欢现代浏览器的CSS3备份。

Answer 1

你不必上课。使用传统标签，只需为其添加CSS即可。

通过直接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; }

通过JS添加的直接CSS

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 2

我不知道为什么没有人建议CSS3动画

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

.blink {
  animation: blink 600ms infinite;
}

演示论JSBin。

Answer 3

您只需为此目的使用CSS text-decoration属性：

例如：

span {
    text-decoration: blink;
}

让所有的span nodes眨眼。眨眼..。眨眼..。眨眼..。