利用CSS3伪元素实现逐渐发光的方格边框


Posted in HTML / CSS onMay 07, 2017

本文介绍的是一个使用伪元素来实现边框逐渐发光的代码,主要用到scale和opacity这两个属性。下面来看看详细的介绍:

效果图如下:

利用CSS3伪元素实现逐渐发光的方格边框

HTML代码:

<div class="light">
 <img src="http://tva2.sinaimg.cn/crop.0.0.180.180.180/6830a53bjw8f2qo4xzc2zj20500500t0.jpg"/>
 <div class="light-inner">
  <p>前端开发博客</p>
  <p>关注前端开发</p>
 </div>
</div>

CSS代码:

.light{
 background: #fff;
 width: 180px;
 height: 180px;
 margin: 100px auto;
 position: relative;
 text-align: center;
 color: #333;
 transform:translate3d(0,0,0);

}
.light-inner{
 padding: 60px 30px 0;
 pointer-events: none;
 position: absolute;
 left: 0;
 top: 0;
 bottom: 0;
 right: 0;
 text-align: center;
 transition: background 0.35s;
 backface-visibility: hidden;
}
.light-inner:before, .light-inner:after{
 display: block;
 content: "";
 position: absolute;
 left: 30px;
 top: 30px;
 right: 30px;
 bottom: 30px;
 border: 1px solid #fff;
 opacity: 0;
 transition: opacity 0.35s, transform 0.35s;
}
.light-inner:before{
 border-left: 0;
 border-right: 0;
 transform:scaleX(0,1);
}
.light-inner:after{
 border-top: 0;
 border-bottom: 0;
 transform: scaleY(1,0);
}
.light:hover .light-inner{
 background: #458fd2
}
.light:hover .light-inner:before, .light:hover .light-inner:after{
 opacity: 1;
 transform: scale3d(1,1,1);
}

.light-inner p{
 transition: opacity .35s, transform 0.35s;
 transform: translate3d(0,20px,0);
 color: #fff;
 opacity: 0;
 line-height: 30px;
}
.light:hover .light-inner p{
 transform: translate3d(0,0,0);
 opacity: 1;
}

实现步骤:

发光的方格,主要是通过.light-inner的伪元素:before和:after来实现

上下的边框是从中间往两边逐渐展开:scaleX(0)到scaleX(1)

左右的边框是从中间往上下两边展开:scaleY(0)到scaleY(1)

形成了一个四方形从中间向边角逐渐发光的效果:opacity:0到opacity:1。

其它就没什么技巧了。

scale介绍

scale(<number>[, <number>]):指定对象的2D scale(2D缩放)。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认取第一个参数的值

scaleX(<number>):指定对象X轴的(水平方向)缩放

scaleY(<number>):指定对象Y轴的(垂直方向)缩放

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。
 

HTML / CSS 相关文章推荐
巧用CSS3 border实现图片遮罩效果代码
Apr 09 HTML / CSS
CSS3 Media Queries(响应式布局可以让你定制不同的分辨率和设备)
Jun 06 HTML / CSS
css3实现超立体3D图片侧翻倾斜效果
Apr 16 HTML / CSS
css3的过滤效果简单实例
Aug 03 HTML / CSS
浅谈css3中calc在less编译时被计算的解决办法
Dec 04 HTML / CSS
HTML5实现WebSocket协议原理浅析
Jul 07 HTML / CSS
HTML5超文本标记语言的实现方法
Sep 24 HTML / CSS
HTML5在手机端实现视频全屏展示方法
Nov 23 HTML / CSS
详解如何将 Canvas 绘制过程转为视频
Jan 25 HTML / CSS
能用CSS实现的就不要麻烦JavaScript了
Oct 05 HTML / CSS
html粘性页脚的具体使用
Jan 18 HTML / CSS
HTML5页面打开微信小程序功能实现
Sep 23 HTML / CSS
CSS3实现内凹圆角的实例代码
May 04 #HTML / CSS
利用HTML5+CSS3实现3D转换效果实例详解
May 02 #HTML / CSS
css3+伪元素实现鼠标移入时下划线向两边展开的效果
Apr 25 #HTML / CSS
CSS3实现自定义Checkbox特效实例代码
Apr 24 #HTML / CSS
深入理解css中vertical-align属性
Apr 18 #HTML / CSS
总结30个CSS3选择器
Apr 13 #HTML / CSS
CSS3模拟动画下拉菜单效果
Apr 12 #HTML / CSS
You might like
php5.3 goto函数介绍和示例
2014/03/21 PHP
PHP框架Swoole定时器Timer特性分析
2014/08/19 PHP
学习php设计模式 php实现单例模式(singleton)
2015/12/07 PHP
Yii+MYSQL锁表防止并发情况下重复数据的方法
2016/07/14 PHP
如何正确配置Nginx + PHP
2016/07/15 PHP
CL vs ForZe BO5 第二场 2.13
2021/03/10 DOTA
js停止输出代码
2008/07/20 Javascript
JavaScript入门之事件、cookie、定时等
2011/10/21 Javascript
Jquery post传递数组方法实现思路及代码
2013/04/28 Javascript
jQuery学习之prop和attr的区别示例介绍
2013/11/15 Javascript
jquery表单验证框架提供的身份证验证方法(示例代码)
2013/12/27 Javascript
IE浏览器不支持getElementsByClassName的解决方法
2014/08/27 Javascript
常见的jQuery选择器汇总
2014/11/24 Javascript
深入分析JSON编码格式提交表单数据
2015/06/25 Javascript
HTML5 Shiv完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法
2015/11/25 Javascript
引用jquery框架后出错的解决方法
2016/08/09 Javascript
详解js中call与apply关键字的作用
2016/11/21 Javascript
JS数组排序方法实例分析
2016/12/16 Javascript
bootstrapTable+ajax加载数据 refresh更新数据
2018/08/31 Javascript
vue click.stop阻止点击事件继续传播的方法
2018/09/04 Javascript
JS判断数组是否包含某元素实现方法汇总
2020/06/24 Javascript
[03:30]完美盛典趣味短片 CSGO2019年度名场面
2019/12/07 DOTA
Python中的文件和目录操作实现代码
2011/03/13 Python
Python中enumerate函数代码解析
2017/10/31 Python
python tensorflow学习之识别单张图片的实现的示例
2018/02/09 Python
python控制windows剪贴板,向剪贴板中写入图片的实例
2018/05/31 Python
python支付宝支付示例详解
2019/08/22 Python
CSS3 实现弹幕的示例代码
2017/08/07 HTML / CSS
HTML5获取当前地理位置并在百度地图上展示的实例
2020/07/10 HTML / CSS
YSL圣罗兰美妆官方旗舰店:购买YSL口红
2018/04/16 全球购物
小学教师的自我评价范例
2013/10/31 职场文书
公司领导班子对照材料
2014/08/18 职场文书
2014年财务部工作总结
2014/11/11 职场文书
2014年手术室工作总结
2014/11/26 职场文书
2014年民主评议党员工作总结
2014/12/02 职场文书
优秀共产党员事迹材料
2014/12/18 职场文书