CSS3实现逐渐发光的方格边框实例

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

HTML代码：

代码如下
="light"> <pclass="light"> <imgsrc="http://tva2.sinaimg.cn/crop.0.0.180.180.180/6830a53bjw8f2qo4xzc2zj20500500t0.jpg"/> <pclass="light-inner"> <p>前端开发博客</p> <p>关注前端开发</p> </p> </p>

CSS代码：

代码如下

.light{ background:#fff; width:180px; height:180px; margin:100pxauto; position:relative; text-align:center; color:#333; transform:translate3d(0,0,0); } .light-inner{ padding:60px30px0; pointer-events:none; position:absolute; left:0; top:0; bottom:0; right:0; text-align:center; transition: background0.35s; backface-visibility:hidden; } .light-inner:before, .light-inner:after{ display:block; content:""; position:absolute; left:30px; top:30px; right:30px; bottom:30px; border:1pxsolid#fff; opacity:0; transition: opacity0.35s, transform0.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, transform0.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(

scaleX(

scaleY(

相关推荐：

在CSS3中设置元素的边框、背景和大小的方法讲解

有关单元素利用css实现多重边框效果实例详解

css中如何设置半透明边框？

以上就是CSS3实现逐渐发光的方格边框实例的详细内容，更多请关注其它相关文章！