CSS实现输入框的周围高亮效果让边框发亮

所属分类: 网页制作 / CSS 阅读数: 1124
收藏 0 赞 0 分享
又到周末了,这一天天过的真快,明天应该回老家了,不知道会不会有机会进行编写,尽量争取吧,实在不想就这样间断。如果说从前会一天天无聊到爆,那现在自己应该是一天天忙的要死,欠缺了太多东西,那些浪费的时间可不是懊恼就能解决的,出来混,终归是要还的啊。

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

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

这样我们先来上一下代码,我是用的枫树浏览器,是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浏览器的额
更多精彩内容其他人还在看

CSS3实现背景透明文字不透明的示例代码

这篇文章主要介绍了CSS3实现背景透明文字不透明的示例代码的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

浅谈CSS中的尺寸单位

这篇文章主要介绍了浅谈CSS中的尺寸单位的相关资料,浏览器的兼容性越来越好,移动端基本是清一色的webkit,经常会用到css的不同尺寸/长度单位,这里做个整理。感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

CSS中有些属性的前面会加上“*”或“_”所代表的意思

这篇文章主要介绍了CSS中有些属性的前面会加上“*”或“_”所代表的意思,需要的朋友可以参考下
收藏 0 赞 0 分享

CSS 设置滚动条样式的实例代码

这篇文章主要介绍了CSS 设置滚动条样式的实例代码,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧
收藏 0 赞 0 分享

纯CSS制作各种各样的网页图标(三角形、暂停按钮、下载箭头、加号等)

这篇文章主要介绍了纯CSS制作各种各样的网页图标(三角形、暂停按钮、下载箭头、加号等)的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

纯css实现多级折叠菜单折叠树效果

这篇文章主要介绍了纯css实现多级折叠菜单折叠树效果,运用checkbox的checked值来判断下级栏目是否展开,通过css3选择器提供的checked伪类来实现此效果,感兴趣的朋友参考下吧
收藏 0 赞 0 分享

CSS Grid 网格布局全解析

这篇文章主要介绍了CSS Grid 网格布局全解析的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

css flex 弹性布局详解

这篇文章主要介绍了css flex 弹性布局详解的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

CSS3 二级导航菜单的制作的示例

这篇文章主要介绍了CSS3 二级导航的制作的示例的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

使用css禁用input、checkbox、select等html控件实现disable效果

这篇文章主要介绍了使用css禁用input、checkbox、select等html控件实现disable效果,需要的朋友可以参考下
收藏 0 赞 0 分享
查看更多