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制作翻转效果_动力节点Java学院整理
Jul 11 HTML / CSS
CSS3 开发工具收集
Apr 17 HTML / CSS
CSS3盒子模型详解
Apr 24 HTML / CSS
css3的transition效果和transfor效果示例介绍
Oct 30 HTML / CSS
实例讲解CSS3中Transform的perspective属性的用法
Apr 22 HTML / CSS
css3media响应式布局实例
Jul 08 HTML / CSS
浅谈CSS3 box-sizing 属性 有趣的盒模型
Apr 02 HTML / CSS
css3实现六边形边框的实例代码
May 24 HTML / CSS
详解Canvas事件绑定
Jun 27 HTML / CSS
html5中地理位置定位api接口开发应用小结
Jan 04 HTML / CSS
css3 transform 3d 使用css3创建动态3d立方体(html5实践)
Jan 06 HTML / CSS
详解HTML5布局和HTML5标签
Oct 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
Nginx+php配置文件及原理解析
2020/12/09 PHP
javascript  Error 对象 错误处理
2008/05/18 Javascript
一行代码实现纯数据json对象的深度克隆实现思路
2013/01/09 Javascript
jQuery渐变发光导航菜单的实例代码
2013/03/27 Javascript
GRID拖拽行的实例代码
2013/07/18 Javascript
JavaScript中访问节点对象的方法有哪些如何使用
2013/09/24 Javascript
js设置组合快捷键/tabindex功能的方法
2013/11/21 Javascript
JS实现支持Ajax验证的表单插件
2016/03/24 Javascript
在网页中插入百度地图的步骤详解
2016/12/02 Javascript
3分钟掌握常用的JS操作JSON方法总结
2017/04/25 Javascript
vue实现移动端图片裁剪上传功能
2020/08/18 Javascript
js删除数组中的元素delete和splice的区别详解
2018/02/03 Javascript
VSCode中如何利用d.ts文件进行js智能提示
2018/04/13 Javascript
Node.js 使用request模块下载文件的实例
2018/09/05 Javascript
详解babel升级到7.X采坑总结
2019/05/12 Javascript
JQuery获取元素尺寸、位置及页面滚动事件应用示例
2019/05/14 jQuery
JS实现简单日历特效
2020/01/03 Javascript
[02:37]2015国际邀请赛选手档案—LGD.Xiao8
2015/07/28 DOTA
利用python实现数据分析
2017/01/11 Python
详解python算法之冒泡排序
2019/03/05 Python
Django中多种重定向方法使用详解
2019/07/17 Python
使用Pyinstaller转换.py文件为.exe可执行程序过程详解
2019/08/06 Python
Python实现滑动平均(Moving Average)的例子
2019/08/24 Python
解决python明明pip安装成功却找不到包的问题
2019/08/28 Python
python实现FTP循环上传文件
2020/03/20 Python
Java byte数组操纵方式代码实例解析
2020/07/22 Python
基于Python实现天天酷跑功能
2021/01/06 Python
python+opencv3.4.0 实现HOG+SVM行人检测的示例代码
2021/01/28 Python
俄罗斯品牌服装和鞋子的在线商店:KUPIVIP
2019/10/27 全球购物
SQL里面如何插入自动增长序列号字段
2012/03/29 面试题
请解释接口的显式实现有什么意义
2012/05/26 面试题
2014年五四青年节演讲比赛方案
2014/04/22 职场文书
护理实习生带教计划
2015/01/16 职场文书
大学生个人简历自荐信
2015/03/06 职场文书
《兰兰过桥》教学反思
2016/02/20 职场文书
goland设置颜色和字体的操作
2021/05/05 Golang