Question

任何人都知道如何让这个输入框的边框颜色淡入黄色，然后淡出，然后淡入，然后使用jquery在页面加载时再次淡出（脉动两次）？在脉动之后，边框颜色应设置为透明。我试过各种各样的设定时间，但似乎没有任何效果。请帮助，谢谢!!

<input type="search" id="searches" autofocus="autofocus" placeholder="Search" onclick="select();">

Answer 1

这可以通过CSS3完成：

#searches {
  border: 2px solid transparent;
  -webkit-animation: pulse 0.7s;
  -webkit-animation-iteration-count: 2;
  animation: pulse 0.7s;
  animation-iteration-count: 2;
  background: white;
  outline: 0;
}

@-webkit-keyframes pulse {
  from { border-color: transparent; }
  50% { border-color: yellow; }
  to { border-color: transparent; }
}
@keyframes pulse {
  from { border-color: transparent; }
  50% { border-color: yellow; }
  to { border-color: transparent; }
}

jsFiddle示例：http://jsfiddle.net/spXH8/1/

如果您真的需要使用jQuery（对于IE支持或其他东西），请参阅accepted answer的'Pulsing' a border in Javascript/JQuery。

使输入框的边界在负载上产生脉动

1 个答案: