css3通过animation实现不断闪烁发光效果
比如一般的文本输入框，这里演示的是一直闪烁，也可以改为焦点时进行闪烁或者发亮
<style type="text/css">
*{ outline:0;}
input{
border-radius:6px;
border:1px solid #909090;
height:40px; width:400px;
padding:0 5px;
animation:faguang 2s infinite;
-moz-animation:faguang 2s infinite;
-webkit-animation:faguang 2s infinite;
}
input:focus{
-webkit-animation:none;
-moz-animation:none;
}
@keyframes faguang{
50%{
border:#87C6F9 1px solid;
box-shadow: 0 0 8px rgba(0, 140, 0, 1);
}
}
@-moz-keyframes faguang{
50%{
border:#87C6F9 1px solid;
-moz-box-shadow: 0 0 8px rgba(0, 140, 0, 1);
}
}
@-webkit-keyframes faguang{
50%{
border:#87C6F9 1px solid;
-webkit-box-shadow: 0 0 8px rgba(0, 140, 0, 1);
}
}
</style>
<input type="text" placeholder='焦点与非焦点，试一下吧'>效果如下
