4

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

于是，一个问题：

如何blink在现代浏览器（想想 Chrome）中模拟（在 IE6 中完美运行）？

更新： 我找到了这个 jQuery 插件来做闪烁，但我们不使用 jQuery，并且更喜欢现代浏览器的 CSS3 后备。

4

5 回答 5

9

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

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

.blink {
  animation: blink 600ms infinite;
}

JSBin 上的演示。

于 2013-10-05T21:22:03.233 回答
6

您可以text-decoration为此目的使用 CSS 属性：

例如：

span {
    text-decoration: blink;
}

让所有人span nodes眨眼……眨眼……眨眼……眨眼……

于 2012-07-09T11:03:13.257 回答
4

这是一些要模拟的 JavaScript <blink>：

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到任何元素。

于 2012-07-09T11:48:00.990 回答
2

你不必上课。使用传统标签并简单地为其添加 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>

于 2016-02-25T18:32:41.830 回答
1

只是备注：如果你想“闪烁”一个链接，最好改变闪烁文本的颜色而不是隐藏它，因为当它隐藏时你不能点击它，所以它变成了一个尝试点击的游戏链接 ：-）

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';
        }
    }
}

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

于 2013-10-05T14:37:07.267 回答