CSS实现输入框的高亮效果-------Day50
又到周末了,这一天天过的真快,明天应该回老家了。不知道会不会有机会进行编写。尽量争取吧,实在不想就这样间断。假设说从前会一天天无聊到爆,那如今自己应该是一天天忙的要死,欠缺了太多东西,那些浪费的时间可不是懊恼就能解决的。出来混。终归是要还的啊。
先来幅图画,显示下什么是所谓的高亮效果
在输入框周围出现了亮光,或者说阴影造成边框发亮的假象。这就是我所说的高亮效果,那到底该怎样是实现呢?
这样我们先来上一下代码,我是用的枫树浏览器,是webkit内核。所以这里仅仅写了webkit
.aa:HOVER{
-webkit-transition:border linear .2s,-webkit-box-shadow linear .5s;
border-color:rgba(141,39,142,.75);
-webkit-box-shadow:0 0 18px rgba(111,1,32,3);
}
.aa{
height: 100px;width: 100px;
}
就这么了了几句话就实现了功能,图我就不上了,大致跟上面一个效果,则来分析一下成功的几个关键点:
1、transition的过渡。border linear .2s这是说border属性的逐步过渡。而后面则是对阴影部分的逐步过渡。
2、rgba(a,b,c,d),这个前面我们以前用到过非常多次,前三位凑成颜色。而第四位则是透明度,还需牢记才是。
3、box-shadow:x y 10px rgba(a,b,c,d)。相同在前面用到过非常多次。x y各自是阴影的方向, 然后是阴影蔓延距离。最后则是阴影部分的颜色。
4、最后则是:hover,伪元素和伪类能够单独写一篇了吧,可是这个:hover起码我们都是相当熟悉的了吧
当然。不要忘记html部分的编写哦
<input type="text" class="aa">
这个能够直接复制去试试效果哦,只是我敲出来的仅仅是webkit浏览器的额
好了。要歇息了,明天还得早起,又要跑两天啊,时间好多都浪费在路上了......
CSS实现输入框的高亮效果-------Day50的更多相关文章
- 使用CodeMirror在浏览器中实现编辑器的代码高亮效果
使用CodeMirror在浏览器中实现编辑器的代码高亮效果 在网站后台管理中希望能够对网站的样式表css与js文件以及模板html进行管理,在编辑的时候只是以普通文本展示又太普通,显得好难看,于是便在 ...
- CSS发光边框文本框效果
7,166 次阅读 ‹ NSH Blog 网页设计 CSS发光边框文本框效果 或许你看过Safari浏览器下,任何输入框都会有一个发光的蓝色边框,这不单纯只是蓝色边框而已,其实包含了许多CSS3技巧知 ...
- UI-切圆角、透明度、取消按钮点击高亮效果、按钮文字带下划线
一.切UIView的某个角为圆角 如果需要将UIView的4个角全部都为圆角,做法相当简单,只需设置其Layer的cornerRadius属性即可(项目需要使用QuartzCore框架).而若要指定某 ...
- 你想不到的!CSS 实现的各种球体效果【附在线演示】
CSS 可以实现很多你想不到的效果,今天我们来尝试使用 CSS 实现各种球体效果.有两种方法可以实现,第一种是使用大量的元素创建实际的 3D 球体,这种方法有潜在的性能问题:另外一种是使用 CSS3 ...
- UITableView或UIScrollVIew上的UIButton的高亮效果
UITableView或UIScrollVIew上的UIButton的高亮效果 原文地址:http://www.jianshu.com/p/b4331f06bd34 最近做项目的时候发现,UIScro ...
- 炫!一组单元素实现的 CSS 加载进度提示效果
之前的文章个大家分享过各种类型的加载效果(Loading Effects),这里再给大家奉献一组基于单个元素实现的 CSS 加载动画集合.这些加载效果都是基于一个 DIV 元素实现的,十分强悍. 温馨 ...
- Codrops 优秀教程:CSS 3D Transforms 实现书本效果
这个使用 CSS 3D Transforms 实现创意书本效果的来自 Codrops 网站.你可以看到两种类型的书设计:精装书和平装书.这两个效果都可以很容易地使用 CSS 修改.赶紧体验一下吧. ...
- CSS 实现的各种球体效果
CSS 实现的各种球体效果[附在线演示] CSS 可以实现很多你想不到的效果,今天我们来尝试使用 CSS 实现各种球体效果.有两种方法可以实现,第一种是使用大量的元素创建实际的 3D 球体,这种方法有 ...
- CSS 实现滚动进度条效果
参考:https://www.w3cplus.com/css/pure-css-create-scroll-indicator.html 前言:细化总结.参考的文章作者已经写的很详细了.这里在从初学者 ...
随机推荐
- Solr4.2迁移到新项目下异常:java.lang.NoSuchMethodError: org.apache.http.conn.scheme.Scheme.<init>
由于业务调整,需要将solr搜索项目集成到另一个项目下成为一个模块,原项目运行异常,但是迁移到新项目后出现异常如下: 原因:引入的httpclient.jar冲突 解决方法:删除冲突的jar
- android 打包 /${zipalign}" error=2, No such file or directory
当我更新完android L proview之后我的打包出问题了,报错/${zipalign}" error=2, No such file or directory 排查了一下午才知道 近 ...
- 恢复PasswordChar 默认值、取消密码框设置
//三种都是清空 this.textBox1.PasswordChar = new char(); this.textBox1.PasswordChar = '\0'; this.textBox1.P ...
- 强化一下开源库:Synopse
http://synopse.info/fossil/wiki/Synopse+OpenSource 有空要研究一下,只有写在这里,才会时时刻刻提醒自己.
- 解决android应用程序适用新老android系统版本方法
老的android系统不能运行高版本系统的新方法,为了解决这个问题: if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB) { ...
- ABAP文件上传下载 用SMW0
以excel举例 smw0事物代码进入传输模板到服务器上: 下载模板的用到的from代码如下: FORM sub_chek_directory . DATA: l_formkey1 LIKE wwwd ...
- Android 保存用户偏好设置
很多情况下都允许用户根据自己的习惯和爱好去设置软件,而我们需要保存这些设置,可以用一个专业保存用户偏好的类:SharedPreferences. 这个类是实现方法其实也就是创建和修改 XML 文件, ...
- linux下C/C++,多线程pthread《转载》
原文网址:http://www.cnblogs.com/xianghang123/archive/2011/08/11/2134927.html ·线程创建 函数原型:int pthread_cr ...
- Oracle rank和dense_rank排名函数
1.rank函数 rank计算一组值的排名,返回数字类型.排名可能是不连续.如果有5人,其中有2个人排名第一,则rank返回的排名结果为:1 1 3 4 5. 作为一个聚合函数,返回虚拟行在样表中的排 ...
- android 请求网络 和 httpclient的使用上传下载
访问网络最主要的也就是 http协议了. http协议很简单,但是很重要. 直接上代码了,里面都是1个代码块 代码块的,用哪一部分直接拷出去用就好了. 1.访问网络用 get 和 post 自己组拼 ...