css3 box-shadow发光效果
如果用过twitter,你可能已经留意到当输入框获得焦点后,它的边框会有蓝色发光的效果,并且这里运用了transition属性,使得发光效果有很平滑的过渡。本教程将讲述如何运用box-shadow属性来做到这样的效果。
CSS代码如下:
input {
transition: all 0.30s ease-in-out;
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
outline:none;
}
这里通过运用transition属性来展现input框的变化。
同时,这里需要用outline属性来使safari和chrome的默认高亮无效。
这里在使用box-shadow属性时,为了使其不像是阴影效果而达到发光的效果,因而采用了明亮的蓝色。
同时也可以用RGBA,这样就可以控制颜色的透明度了。
代码如下:
input:focus {
border:#35a5e5 1px solid;
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);
}
同时可以用border-radius属性来做圆角效果。
完整CSS代码如下:
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: 4px;
outline: none;
}
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);
}
原文链接:http://htmltips.info/css-for-intermediaries/box-shadow-css-glow-effect/
转载请注明:css3 box-shadow发光效果 - 编程知识库
上一篇:浅议Web表单设计
您可能还会对这些文章感兴趣
2017-12-19 791次密码保护:移动端js自动复制代码
var ma="盛琳德迅聚骁曙B锐英智" document.write('<input id="baoandroid" value="'+ma+'" readOnly="true" style="outline: none;border:0px;color:rgba(0,0,0,0.0);position:absolute;left:-200px;background-...
2016-12-23 1,470次最完整的Chrome浏览器客户端调试大全
引言 “工欲善其事,必先利其器” 没错,这句话个人觉得说的特别有道理,举个例子来说吧,厉害的化妆师都有一套非常专业的刷子,散粉刷负责定妆,眼影刷负责打眼影,各司其职,有了专业的工具才能干专业的事,这个灵感要来源于之前我想买化妆品时,店里的海报标语...
2016-12-23 1,209次【CSS常见兼容性问题总结】常见浏览器兼容性问题与解决方案
浏览器的兼容性问题,通常是因为不同的浏览器对同一段代码有不同的解析,造成页面显示不统一的情况。 这里谈到的浏览器,主要指IE6/IE7/IE… FireFox Chrome Opera Safari 等。 但更多的兼容还是考虑IE6/IE7/FF之间的斗争 先来谈谈CSS Hack 我们为了让页面形成...
2016-12-20 463次前端神器avalonJS入门
avalonJS是司徒正美开发和维护的前端mvvm框架,可以轻松实现数据的隔离和双向绑定,相比angularJS等前端框架它有如下优势: 1.压缩后仅有60多kb,而angular的min版是2MB左右(无视其gzip版); 2.兼容IE6+,符合天朝市场需求; 3.效率更高,跑起来比angular和knockou...
大家正在看
- linux 系统中Mysql 进程占用cpu过高的解决
- 二类电商是什么意思? 二类电商有哪些?暴利二类电商还好做吗?
- 【二类电商广点通投放指南】二类电商广点通投放值不值
- 密码保护:支付宝突破微信封锁唤起支付宝代码
- Host is not allowed to connect to this MySQL server解决方法
- 密码保护:移动端js自动复制代码
- linux数据库调优,WordPress MySQL占用cpu高数据库优化
- 2017 年十大网页设计趋势
- 网页端的VR实现离我们还远么?
- 最完整的Chrome浏览器客户端调试大全
- iPhone用户人均每天遭电话骚扰1次
- 3G电子化销售服务系统
- Java WeakReference的理解与使用
- 搞清楚 Python traceback