Question

我有一个select标签和选项标签，如下所示。

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

我想闪现第二个＆＃34;选择选择标记时，选项标记会闪烁一次，并展开选项标记。

我如何在纯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 }
}

Pure 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

Answer 2

您可以将:focus伪类与nth-child和CSS动画一起使用。

当select聚焦时，此示例将闪烁背景，例如单击它以展开它时。

不幸的是，由于某些浏览器的限制，这似乎并不适用于所有浏览器和操作系统组合，但它适用于允许您选择选项样式的浏览器。

工作示例：

＆＃13;

select:focus option:nth-child(2) {
    -webkit-animation: flash 0.25s 2 alternate;
       -moz-animation: flash 0.25s 2 alternate;
            animation: flash 0.25s 2 alternate;
}

@-webkit-keyframes flash {
    0% {
        background: transparent;
    }
    100% {
        background: red;
    }
}
@-moz-keyframes flash {
    0% {
        background: transparent;
    }
    100% {
        background: red;
    }
}
@keyframes flash {
    0% {
        background: transparent;
    }
    100% {
        background: red;
    }
}

＆＃13;

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

＆＃13;

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

2 个答案:

工作示例：