css3实现input输入框颜色渐变发光效果代码


Posted in HTML / CSS onApril 02, 2014

给边框实现单击颜色渐变效果,这并不是单纯的box-shadow属性而已,它的发光是像四周均匀发光,它还包含一个缓慢发光过渡效果。

在继续学习之前,你必须要有一些Css3的基础知识。做出这一切需要你了解CSS3的Shadow和RGBa、Transition属性,否则就无法理解了。

1.制作发光边框文本框效果

复制代码
代码如下:

<input type="text" class="sdw" />

然后我们要让这个input组件在被成为焦点(点击)时向四周发光,显示为蓝色,我只需添加一段CSS代码:
复制代码
代码如下:

sdw:focus{
transition:border linear .2s,box-shadow linear .5s;
-moz-transition:border linear .2s,-moz-box-shadow linear .5s;
-webkit-transition:border linear .2s,-webkit-box-shadow linear .5s;
outline:none;border-color:rgba(93,149,242,.75);
box-shadow:0 0 8px rgba(93,149,242,.105);
-moz-box-shadow:0 0 8px rgba(93,149,242,.5);
-webkit-box-shadow:0 0 8px rgba(93,149,242,3);
}

就可以了。其中的RGB色彩可以根据个人口味进行改变。预览效果如下:

2.为全局所有input组件添加边框发光效果

如果希望一个网页中所有的文字输入框出现这种效果,只需CSS全局设定即可。

在你的CSS文件中添加这么一句:

复制代码
代码如下:

input[type=text]:focus,input[type=password]:focus,textarea:focus{}

HTML / CSS 相关文章推荐
CSS3 简单又实用的5个属性
Mar 04 HTML / CSS
css3设置box-pack和box-align让div里面的元素垂直居中
Sep 01 HTML / CSS
css3实现六边形边框的实例代码
May 24 HTML / CSS
CSS3 input框的实现代码类似Google登录的动画效果
Aug 04 HTML / CSS
html5 canvas实现跟随鼠标旋转的箭头
Mar 11 HTML / CSS
教你如何一步一步用Canvas写一个贪吃蛇
Oct 22 HTML / CSS
HTML5实现分享到微信好友朋友圈QQ好友QQ空间微博二维码功能
Jan 03 HTML / CSS
前端canvas动画如何转成mp4视频的方法
Jun 17 HTML / CSS
HTML5 Canvas中绘制椭圆的4种方法
Apr 24 HTML / CSS
localStorage的过期时间设置的方法详解
Nov 26 HTML / CSS
Canvas高级路径操作之拖拽对象的实现
Aug 05 HTML / CSS
常用的文件对应的MIME类型汇总
Apr 26 HTML / CSS
CSS去掉A标签(链接)虚线框的方法
Apr 01 #HTML / CSS
使用css3背景渐变中的透明度来设置不同颜色的背景渐变
Mar 31 #HTML / CSS
你应该知道的30个css选择器
Mar 19 #HTML / CSS
纯CSS3打造动感漂亮时尚的扇形菜单
Mar 18 #HTML / CSS
CSS3中background-clip和background-origin的区别示例介绍
Mar 10 #HTML / CSS
CSS3中:nth-child和:nth-of-type的区别深入理解
Mar 10 #HTML / CSS
CSS书写规范、顺序和命名规则
Mar 06 #HTML / CSS
You might like
mysql 的 like 问题,超强毕杀记!!!
2007/01/18 PHP
php面向对象中的魔术方法中文说明
2014/03/04 PHP
Laravel最佳分割路由文件(routes.php)的方式
2016/08/04 PHP
PHP执行系统命令函数实例讲解
2021/03/03 PHP
Prototype Class对象学习
2009/07/19 Javascript
jQuery 源码分析笔记(6) jQuery.data
2011/06/08 Javascript
javascript动态加载三
2012/08/22 Javascript
Jquery 数据选择插件Pickerbox使用介绍
2012/08/24 Javascript
js多级树形弹出一个小窗口层(非常好用)实例代码
2013/03/19 Javascript
利用JS延迟加载百度分享代码,提高网页速度
2013/07/01 Javascript
jquery判断RadioButtonList和RadioButton中是否有选中项示例
2013/09/29 Javascript
JavaScript中读取和保存文件实例
2014/05/08 Javascript
js限制checkbox选中个数以限制六个为例
2014/07/15 Javascript
jQuery解析XML与传统JavaScript方法的差别实例分析
2015/03/05 Javascript
鼠标经过子元素触发mouseout,mouseover事件的解决方案
2015/07/26 Javascript
11种ASP连接数据库的方法
2015/09/18 Javascript
基于jQuery Bar Indicator 插件实现进度条展示效果
2015/09/30 Javascript
jQuery用FormData实现文件上传的方法
2016/11/21 Javascript
AngularJS之ionic 框架下实现 Localstorage本地存储
2017/04/22 Javascript
[49:02]KG vs Infamous 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
Python实现上下班抢个顺风单脚本
2018/02/07 Python
python pandas 如何替换某列的一个值
2018/06/09 Python
Python迭代器与生成器用法实例分析
2018/07/09 Python
Python调用C++,通过Pybind11制作Python接口
2018/10/16 Python
简单了解Django ORM常用字段类型及参数配置
2020/01/07 Python
Pyinstaller打包Scrapy项目的实现步骤
2020/09/22 Python
python学习之使用Matplotlib画实时的动态折线图的示例代码
2021/02/25 Python
Html5之title吸顶功能
2018/06/04 HTML / CSS
泰国办公用品购物网站:OfficeMate
2018/02/04 全球购物
英国卫浴商店:Ergonomic Design
2019/09/22 全球购物
电子商务专业学生的学习自我评价
2013/10/27 职场文书
《威尼斯的小艇》教学反思
2014/02/17 职场文书
建设办主任四风问题整改思路和措施
2014/09/20 职场文书
幼儿园中班个人总结
2015/02/28 职场文书
如何写通讯稿
2015/07/22 职场文书
导游词之凤凰古城
2019/10/22 职场文书