欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
您的位置:DIVCSS5首页 > CSS特效 >

css实现发光的input输入框

 

效果图截图:

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输入框 ” 的全部内容。

css实现发光的input输入框

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

我要分享到:

必备CSS教程 Essential CSS Tutorials

必备HTML基础教程 Essential HTML Tutorials

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
CSS教程文章修订日期:2018-08-22 09:57 原创:DIVCSS5
本文www.divcss5.com DIVCSS5版权所有。