css实现发光的input输入框

效果图截图：

案例代码示下：

<!DOCTYPE
 html><html> <head> <meta charset="UTF-8"> 
<title>发光输入框</title> <style type="text/css"> 
input{width: 280px;height: 30px;} textarea{width: 280px;height: 80px;} 
input,textarea{ -webkit-transition: all 0.30s ease-in-out; 
-moz-transition: all 0.30s ease-in-out; -ms-transition: all 0.30s 
ease-in-out; -o-transition: all 0.30s ease-in-out; outline: none; 
padding: 3px 0 3px 3px; margin: 5px 1px 3px 0; border: #ddd 1px solid; }
 input:focus,textarea:focus{ box-shadow: 0 0 5px rgba(216,76,41,1); 
padding: 3px 0 3px 3px; margin: 5px 1px 3px 0; border: rgba(216,76,41,1)
 1px solid; } </style> </head> <body> <input 
type="text" name="" id="" value="" /> 
<textarea></textarea> </body></html>

注意：

这里使用了css的 transition 动画属性。
transition的浏览器兼容性，添加浏览器厂商前缀。

以上就是关于 “ css实现发光的input输入框 ” 的全部内容。

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/css-texiao/texiao50788.shtml