又到周末了,这一天天过的真快,明天应该回老家了。不知道会不会有机会进行编写。尽量争取吧,实在不想就这样间断。假设说从前会一天天无聊到爆,那如今自己应该是一天天忙的要死,欠缺了太多东西,那些浪费的时间可不是懊恼就能解决的。出来混。终归是要还的啊。

先来幅图画,显示下什么是所谓的高亮效果

在输入框周围出现了亮光,或者说阴影造成边框发亮的假象。这就是我所说的高亮效果,那到底该怎样是实现呢?

这样我们先来上一下代码,我是用的枫树浏览器,是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的更多相关文章

  1. 使用CodeMirror在浏览器中实现编辑器的代码高亮效果

    使用CodeMirror在浏览器中实现编辑器的代码高亮效果 在网站后台管理中希望能够对网站的样式表css与js文件以及模板html进行管理,在编辑的时候只是以普通文本展示又太普通,显得好难看,于是便在 ...

  2. CSS发光边框文本框效果

    7,166 次阅读 ‹ NSH Blog 网页设计 CSS发光边框文本框效果 或许你看过Safari浏览器下,任何输入框都会有一个发光的蓝色边框,这不单纯只是蓝色边框而已,其实包含了许多CSS3技巧知 ...

  3. UI-切圆角、透明度、取消按钮点击高亮效果、按钮文字带下划线

    一.切UIView的某个角为圆角 如果需要将UIView的4个角全部都为圆角,做法相当简单,只需设置其Layer的cornerRadius属性即可(项目需要使用QuartzCore框架).而若要指定某 ...

  4. 你想不到的!CSS 实现的各种球体效果【附在线演示】

    CSS 可以实现很多你想不到的效果,今天我们来尝试使用 CSS 实现各种球体效果.有两种方法可以实现,第一种是使用大量的元素创建实际的 3D 球体,这种方法有潜在的性能问题:另外一种是使用 CSS3 ...

  5. UITableView或UIScrollVIew上的UIButton的高亮效果

    UITableView或UIScrollVIew上的UIButton的高亮效果 原文地址:http://www.jianshu.com/p/b4331f06bd34 最近做项目的时候发现,UIScro ...

  6. 炫!一组单元素实现的 CSS 加载进度提示效果

    之前的文章个大家分享过各种类型的加载效果(Loading Effects),这里再给大家奉献一组基于单个元素实现的 CSS 加载动画集合.这些加载效果都是基于一个 DIV 元素实现的,十分强悍. 温馨 ...

  7. Codrops 优秀教程:CSS 3D Transforms 实现书本效果

    这个使用  CSS 3D Transforms 实现创意书本效果的来自 Codrops 网站.你可以看到两种类型的书设计:精装书和平装书.这两个效果都可以很容易地使用 CSS 修改.赶紧体验一下吧. ...

  8. CSS 实现的各种球体效果

    CSS 实现的各种球体效果[附在线演示] CSS 可以实现很多你想不到的效果,今天我们来尝试使用 CSS 实现各种球体效果.有两种方法可以实现,第一种是使用大量的元素创建实际的 3D 球体,这种方法有 ...

  9. CSS 实现滚动进度条效果

    参考:https://www.w3cplus.com/css/pure-css-create-scroll-indicator.html 前言:细化总结.参考的文章作者已经写的很详细了.这里在从初学者 ...

随机推荐

  1. 跨平台编程中的宏定义(__LINE__和__DATE__极其有用)

    要用师兄的计算机算东西,无赖那上面是WINDOWS的系统,为了写出能够跨平台的代码,需要在代码中用到宏来选择编译.一种方法是自己在Makefile里面定义好该平台对应的宏.实际上,编译器基本上都会有一 ...

  2. Delphi下用API代码创建Form

    program PMyWindowClass; uses  Windows,  Messages,  SysUtils; type  TMyWindow = class(TObject)  priva ...

  3. perl 继承概述

    <pre name="code" class="html">[root@wx03 test]# cat Horse.pm package Horse ...

  4. [置顶] js中如何复制一个对象,如何获取所有属性和属性对应的值

    在js中如何复制一个对象,例如如下一个js对象. 如果知道这个对象的所有属性自然就可以重新new一个,然后对每个属性赋值,就可以做到,但如果不知道呢?如何创建一个内容相同 的对象呢? var obj= ...

  5. JS - 图片放大器

    下载地址:http://www.lanrentuku.com/js/tupian-1170.html

  6. Citrix 服务器虚拟化之三十二 XenConvert

    Citrix 服务器虚拟化之三十二  XenConvert 简介: Citrix XenConvert 是用于实现物理到虚拟(P2V)转换的工具,可将工作负载从运行 Windows 的服务器或桌面计算 ...

  7. UVA 565 565 Pizza Anyone? (深搜 +位运算)

      Pizza Anyone?  You are responsible for ordering a large pizza for you and your friends. Each of th ...

  8. 监控apache虚拟主机进程

    mod_status模块能输出例如以下内容: 正在伺服请求的工作者(线程或进程)数量 空暇的工作者数量 每一个工作者的状态:已完毕的请求数.已发送的字节数.(*) 总訪问数和已发送的字节总数(*) s ...

  9. tmd123.com

    赞!完胜百度的搜索!比baidu.com好多了! 搜索用!非常像!比baidu.com好多了! mark一下 发现有人录制了101集swift视频教程好像持续更新中......

  10. oracle实现远程连接超简单;枚举与剪枝();PowerDesigner生成数据库代码注意里面的双引號,应该去掉

    点击開始,查看netManager,点击面板的监听程序,默认仅仅有地址1且标记着localhost.新建一个地址,输入本机IP,又一次开启监听程序就可以 △△△ * △△ = △△△△ 某3位数乘以2 ...