CSS实现输入框的周围高亮效果让边框发亮
来源:互联网 发布:家庭矛盾 知乎 编辑:程序博客网 时间:2024/05/16 15:15
先来幅图画,显示下什么是所谓的高亮效果
在输入框周围出现了亮光,或者说阴影造成边框发亮的假象,这就是我所说的高亮效果,那究竟该如何是实现呢?
这样我们先来上一下代码,我是用的枫树浏览器,是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内核,所以这里只写了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">
0 0
- CSS实现输入框的周围高亮效果让边框发亮
- CSS实现输入框的高亮效果-------Day50
- CSS实现输入框的高亮效果-------Day50
- css实现高亮边框
- 纯CSS3实现的表单输入高亮效果
- 如何实现「文字输入高亮」的效果
- CSS实现鼠标悬停图片时的边框变色效果
- css实现边框阴影效果的方法(含兼容)
- 为文本添加发亮的效果
- 中心向周围扩散的css圆圈,动画效果
- Div+Css实现边框阴影效果
- CSS实现图片选中加边框效果
- css伪类之input输入框鼠标点击边框变色效果
- Axure实现弹框周围遮罩效果
- 选中文字高亮的css效果
- CSS图片边框效果的方法
- CSS打造的边框折角效果
- div边框加阴影效果的css
- CSS中background-size的cover属性
- Ubuntu修改Mysql字符编码
- C++的构造函数
- Android网络(3):HttpClient作客户端,Tomcat Servlet作服务器的交互示例
- 欢迎使用CSDN-markdown编辑器
- CSS实现输入框的周围高亮效果让边框发亮
- VC++ combobox模糊匹配,自动匹配
- android usb adb流程,Android系统关机或重启的几种实现方式
- ubuntu下设置开机自动挂载硬盘
- 对程序员最具影响力的书籍清单
- Android网络(4):HttpClient必经之路----使用线程安全的单例模式HttpClient,及HttpClient和Application的融合
- 最大字段和
- 买不到的数目
- Eclipse添加源代码的注释模板