javascript - 如何为选项标签添加闪烁效果？

Question

我在里面有一个选择标签和选项标签，如下所示。

<select>
    <option value="first">First</option>
    <option value="second">second</option>
    <option value="third">Third</option>
</select>

我想在选中 select 标签并展开 option 标签时让“second”选项标签闪烁一次。

我如何在纯 javascript 或 css 中做到这一点？

Answer 1

CSS3 解决方案。要么更改选择器，要么向要闪烁的元素添加“闪烁”类。

.blink {
  -webkit-animation: blink 1s step-end infinite;
  -moz-animation: blink 1s step-end infinite
  -o-animation: blink 1s step-end infinite;
  animation: blink 1s step-end infinite
}

@-webkit-keyframes .blink {
  67% { opacity: 0 }
}

@-moz-keyframes .blink {
  67% { opacity: 0 }
}

@-o-keyframes .blink {
  67% { opacity: 0 }
}

@keyframes .blink {
  67% { opacity: 0 }
}

纯 JS:

<script type="text/javascript">
  function blink() {
    var blinks = document.getElementsByTagName('blink');
    for (var i = blinks.length - 1; i >= 0; i--) {
      var s = blinks[i];
      s.style.visibility = (s.style.visibility === 'visible') ? 'hidden' : 'visible';
    }
    window.setTimeout(blink, 1000);
  }
  if (document.addEventListener) document.addEventListener("DOMContentLoaded", blink, false);
  else if (window.addEventListener) window.addEventListener("load", blink, false);
  else if (window.attachEvent) window.attachEvent("onload", blink);
  else window.onload = blink;
</script>
<blink>Text to blink here</blink>

尽管坦率地说，我不确定为什么该示例坚持使用闪烁元素。我会坚持使用您拥有的 HTML 并更改 JS 以适应。

http://en.wikipedia.org/wiki/Blink_element