7,166 次阅读  ‹ NSH Blog 网页设计
CSS发光边框文本框效果 或许你看过Safari浏览器下,任何输入框都会有一个发光的蓝色边框,这不单纯只是蓝色边框而已,其实包含了许多CSS3技巧知识。如右图,想要获得这样的文本框其实一点也不难的。 需要注意的是,这并不是单纯的box-shadow属性而已,它的发光是像四周均匀发光,它还包含一个缓慢发光过渡效果。 下面就给大家介绍如何创造出这样别致的文本框。 指引 / 跳至 [收缩]
1 了解CSS3的Shadow、Transition属性
2 制作发光边框文本框效果
3 为全局所有input组件添加边框发光效果
了解CSS3的Shadow、Transition属性
在继续学习之前,你必须要有一些Css3的基础知识。做出这一切需要你了解CSS3的Shadow和RGBa、Transition属性,否则就无法理解了。 另外,这种CSS制作的发光效果并不适合于所有浏览器,你可以到这里去了解一下浏览器的支持情况。 制作发光边框文本框效果 首先,拿一个input元素举例: <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(241,39,242,.75);
box-shadow:0 0 8px rgba(241,39,232,.5);
-moz-box-shadow:0 0 8px rgba(241,39,232,.5);
-webkit-box-shadow:0 0 8px rgba(241,39,232,3);
} 就可以了。其中靛蓝色部分的文字是利用了Transition属性产生一个过渡效果,而其中的RGB色彩可以根据个人口味进行改变。预览效果如下: 点击看看,是不是出现了闪光的效果呢? 为全局所有input组件添加边框发光效果
如果希望一个网页中所有的文字输入框出现这种效果,只需CSS全局设定即可。 在你的CSS文件中添加这么一句: input[type=text]:focus,input[type=password]:focus,textarea: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(241,39,242,.75);
box-shadow:0 0 8px rgba(241,39,232,.5);
-moz-box-shadow:0 0 8px rgba(241,39,232,.5);
-webkit-box-shadow:0 0 8px rgba(241,39,232,3);
现在你也可以拥有类似Twitter的那样发光文本框效果。 谢谢收看。 参考资料: 几个高级CSS属性技巧美化网站显示、CSS Transition (变换动画)、CSS实现模拟漫画气泡对话效果

CSS发光边框文本框效果的更多相关文章

  1. css实现input文本框的双边框美化

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  2. css去除ios文本框默认圆角

    css去除ios文本框默认圆角 input, textarea {-webkit-appearance: none;}

  3. CSS动态实现文本框清除按钮的隐藏与显示

    当前现代浏览器中,Chrome浏览器下type=search的输入框会有清除按钮的动态呈现,不过搜索input框尺寸不太好控制(padding无视):FireFox浏览器貌似任何类型的输入框都无动于衷 ...

  4. ime-mode:disabled (用css实现关闭文本框输入法)

    css 之 ime-mode语法:ime-mode : auto | active | inactive | disabled取值:auto : 默认值.不影响ime的状态.与不指定 ime-mode ...

  5. css的input文本框的 propertychange、focus、blur

    1.输入框检查的需求--即时搜索--解决方案 当input的value发生变化就会发生,无论是键盘输入还是鼠标黏贴的改变都能及时监听到变化,propertychange,只要当前对象属性发生改变.(I ...

  6. html css input定位 文本框阴影 灰色不可编辑

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 文本框模糊匹配(纯html+jquery简单实现)

    一.项目中需要用到此功能,使用过EasyUI中的Combobox,网上也搜过相应的解决办法,对于我的项目来说都不太合适,因为我还是喜欢比较纯粹的东西,就自己动手写了一个,比较简单,但还算能用,我的项目 ...

  8. (二十八)c#Winform自定义控件-文本框(一)

    前提 入行已经7,8年了,一直想做一套漂亮点的自定义控件,于是就有了本系列文章. 开源地址:https://gitee.com/kwwwvagaa/net_winform_custom_control ...

  9. (二十九)c#Winform自定义控件-文本框(二)

    前提 入行已经7,8年了,一直想做一套漂亮点的自定义控件,于是就有了本系列文章. 开源地址:https://gitee.com/kwwwvagaa/net_winform_custom_control ...

随机推荐

  1. FadeTop – 定时休息提醒工具

    FadeTop 是款定时休息提醒工具,其特色是当设定时间到达时,将桌面渐变为指定的颜色,强制提醒但不影响桌面的任何操作 FadeTop is a visual break reminder for W ...

  2. 使用HIBERNATE的SQL查询并将结果集自动转换成POJO

    在某些场合下,我们可能想使用HIBERNATE的框架提供的SQL查询接口,但是,由于实体没有做映射,HIBERNATE不能把结果集转换成你想要的List<POJO>,本文讨论如何在这种情况 ...

  3. axure 8.0 动态特效库分享

    认准品牌 六脉神掌 尽量给每一个交互加上效果,尽量模拟真实的交互 无图无真相,我们先看效果图 1 这是还原Android Material Design风格的一个底部菜单效果 2 这个是模拟欢迎页面 ...

  4. 关于jquery的$each((Object, function(p1, p2)用法

    通过它,你可以遍历对象.数组的属性值并进行处理. 使用说明 each函数根据参数的类型实现的效果不完全一致: 1.遍历对象(有附加参数) $.each(Object, function(p1, p2) ...

  5. Linux之文件过滤分割与合并

    文件过滤分割与合并 1.grep命令 grep(global regular expression print)全面搜索正则表达式并把行打印出来,是一种强大的文本搜索工具,它能使用正则表达式搜索文本, ...

  6. linux 系统工具图

  7. poj3926 parade (单调队列+dp)

    题意:有n行路,每行路被分成m段,每一段有长度和权值,要求从最下面一行走到最上面一行某个位置,可以从相邻两行的同一列交点往上走,并且在同一行走的长度要<=K,求走过的最大权值 设f[i][j]为 ...

  8. 不错的redis文章

    参考: https://www.cnblogs.com/itdragon/tag/redis/

  9. luogu 1196 银河英雄传说 带权并查集

    带权并查集,其实有点像许多队列问情况的小学奥数 #include<bits/stdc++.h> #define rep(i,x,y) for(register int i=x;i<= ...

  10. Docker2之Service

    Make sure you have published the friendlyhello image you created by pushing it to a registry. We’ll ...