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支持IE6, 7, and 8的边框border属性
Dec 28 HTML / CSS
基于CSS3特效之动画:animation的应用
May 09 HTML / CSS
多重CSS背景动画实现方法示例
Apr 04 HTML / CSS
CSS3 box-sizing属性详解
Nov 15 HTML / CSS
html5新特性与用法大全
Sep 13 HTML / CSS
html特殊符号示例 html特殊字符编码对照表
Jan 14 HTML / CSS
简单html5代码获取地理位置
Mar 31 HTML / CSS
HTML5实现获取地理位置信息并定位功能
Apr 25 HTML / CSS
canvas简易绘图的实现(海绵宝宝篇)
Jul 04 HTML / CSS
iframe与window.onload如何使用详解
May 07 HTML / CSS
html5跳转小程序wx-open-launch-weapp踩坑
Dec 02 HTML / CSS
css 中多种边框的实现小窍门
Apr 07 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网页游戏学习之Xnova(ogame)源码解读(十六)
2014/06/30 PHP
PHP中上传多个文件的表单设计例子
2014/11/19 PHP
PHP获取服务器端信息的方法
2014/11/28 PHP
php解析mht文件转换成html的实例
2017/03/13 PHP
PHP调用接口用post方法传送json数据的实例
2018/05/31 PHP
javascript arguments 传递给函数的隐含参数
2009/08/21 Javascript
jquery ajax执行后台方法
2010/03/18 Javascript
JavaScript 打地鼠游戏代码说明
2010/10/12 Javascript
js实现图片旋转的三种方法
2014/04/10 Javascript
JQuery标签页效果的两个实例讲解(4)
2015/09/17 Javascript
JavaScript中Date对象的常用方法示例
2015/10/24 Javascript
html5+CSS 实现禁止IOS长按复制粘贴功能
2016/12/28 Javascript
Javascript实现信息滚动效果
2017/05/18 Javascript
Vue.js中数据绑定的语法教程
2017/06/02 Javascript
angularjs实现天气预报功能
2020/06/16 Javascript
详解用webpack的CommonsChunkPlugin提取公共代码的3种方式
2017/11/09 Javascript
canvas轨迹回放功能实现
2017/12/20 Javascript
angular6 填坑之sdk的方法
2018/12/27 Javascript
Vue3.0中的monorepo管理模式的实现
2019/10/14 Javascript
Vue强制组件重新渲染的方法讨论
2020/02/03 Javascript
JS实现省市县三级下拉联动
2020/04/10 Javascript
[40:17]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第一场
2018/04/06 DOTA
python写的一个文本编辑器
2014/01/23 Python
python实现批量修改图片格式和尺寸
2018/06/07 Python
基于python中theano库的线性回归
2018/08/31 Python
详解从Django Rest Framework响应中删除空字段
2019/01/11 Python
python仿evething的文件搜索器实例代码
2019/05/13 Python
python 将字符串中的数字相加求和的实现
2019/07/18 Python
TensorFlow命名空间和TensorBoard图节点实例
2020/01/23 Python
宝拉珍选官方旗舰店:2%水杨酸精华液,收缩毛孔粗大和祛痘
2018/07/01 全球购物
Ariat英国官网:为世界顶级马术运动员制造最优质的鞋类和服装
2020/02/14 全球购物
澳大利亚领先的在线礼品网站:Gifts Australia
2020/08/15 全球购物
音乐专业自荐信
2014/02/07 职场文书
毕业生如何写自荐信
2014/03/26 职场文书
介绍信如何写
2015/01/31 职场文书
HTTP中的Content-type详解
2022/01/18 HTML / CSS