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实现的动画按钮的实例教程
Nov 17 HTML / CSS
html5+css3之CSS中的布局与Header的实现
Nov 21 HTML / CSS
浅析与CSS3的loading动画加载相关的transition优化
May 18 HTML / CSS
关于box-sizing的全面理解
Jul 28 HTML / CSS
CSS3点击按钮实现背景渐变动画效果
Oct 19 HTML / CSS
纯CSS3制作的鼠标悬停时边框旋转
Jan 03 HTML / CSS
结合 CSS3 transition transform 实现简单的跑马灯效果的示例
Feb 07 HTML / CSS
探讨HTML5移动开发的几大特性(必看)
Dec 30 HTML / CSS
微信html5页面调用第三方位置导航的示例
Mar 14 HTML / CSS
html5启动原生APP总结
Jul 03 HTML / CSS
css3 选择器
May 11 HTML / CSS
table不让td文字溢出操作方法
Dec 24 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
php简单的会话类代码
2011/08/08 PHP
PHP+Mysql基于事务处理实现转账功能的方法
2015/07/08 PHP
php页面,mysql数据库转utf-8乱码,utf-8编码问题总结
2015/08/27 PHP
php 伪造HTTP_REFERER页面URL来源的三种方法
2016/09/22 PHP
php接口实现拖拽排序功能
2018/04/23 PHP
PHP反射学习入门示例
2019/06/14 PHP
小议javascript 设计模式 推荐
2009/10/28 Javascript
使用jQuery中的when实现多个AJAX请求对应单个回调的例子分享
2014/04/23 Javascript
jQuery制作拼图小游戏
2015/01/12 Javascript
jquery zTree异步加载简单实例讲解
2016/02/25 Javascript
JS实现禁止鼠标右键的功能
2016/10/15 Javascript
ES6 Map结构的应用实例分析
2019/06/26 Javascript
微信小程序制作扭蛋机代码实例
2019/09/24 Javascript
node.js express框架实现文件上传与下载功能实例详解
2019/10/15 Javascript
用JavaScript实现贪吃蛇游戏
2020/10/23 Javascript
微信小程序实现点击导航标签滚动定位到对应位置
2020/11/19 Javascript
vue3.0+vue-router+element-plus初实践
2020/12/02 Vue.js
[03:09]2014DOTA2国际邀请赛 Mushi前队友送上祝福
2014/07/12 DOTA
[39:19]完美世界DOTA2联赛PWL S2 SZ vs LBZS 第二场 11.26
2020/11/30 DOTA
纯Python开发的nosql数据库CodernityDB介绍和使用实例
2014/10/23 Python
Python操作CouchDB数据库简单示例
2015/03/10 Python
python实现从ftp服务器下载文件的方法
2015/04/30 Python
Python正则抓取网易新闻的方法示例
2017/04/21 Python
Python实现感知机(PLA)算法
2017/12/20 Python
Python机器学习k-近邻算法(K Nearest Neighbor)实例详解
2018/06/25 Python
Python爬虫之正则表达式的使用教程详解
2018/10/25 Python
python sorted函数原理解析及练习
2020/02/10 Python
浅析与CSS3的loading动画加载相关的transition优化
2015/05/18 HTML / CSS
web字体加载方案优化小结
2019/11/29 HTML / CSS
英国电子产品购物网站:Tech in the basket
2019/11/08 全球购物
物业工程部经理岗位职责
2015/04/09 职场文书
邹越演讲观后感
2015/06/15 职场文书
2015年工会工作总结范文
2015/07/23 职场文书
2016学校先进党组织事迹材料
2016/02/29 职场文书
资深HR教你写好简历中的自我评价
2019/05/07 职场文书
Python中Permission denied的解决方案
2021/04/02 Python