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='焦点与非焦点,试一下吧'>
效果如下