首页 > 代码库 > css3 input边框蓝光特效
css3 input边框蓝光特效
1、style样式
<style type="text/css"> .demok3_input { transition: all 0.30s ease-in-out; -webkit-transition: all 0.30s ease-in-out; -moz-transition: all 0.30s ease-in-out; border: #35a5e5 1px solid; border-radius: 3px; outline: none;}.demok3_input:focus { box-shadow: 0 0 5px rgba(81, 203, 238, 1); -webkit-box-shadow: 0 0 5px rgba(81, 203, 238, 1); -moz-box-shadow: 0 0 5px rgba(81, 203, 238, 1);}.demok3_a { text-decoration: none; -webkit-transition: all linear 0.30s; -moz-transition: all linear 0.30s; transition: all linear 0.30s; background: rgba(81, 203, 238, 1); color: white; padding: 6px 25px 6px 25px; font: 12px ‘微软雅黑‘; border-radius: 3px;}.demok3_a:hover { background: rgba(39, 154, 187, 1);}</style>
2、html
<input class="demok3_input" type="text" placeholder="用户名或邮件地址" style="height: 25px"/><input class="demok3_input" type="password" placeholder="请输入密码" style="height: 25px"/><a class="demok3_a" href="#">登陆</a>
演示结果:
css3 input边框蓝光特效
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。