前端開(kāi)發(fā)博客
  
關(guān)注前端開(kāi)發(fā)
 

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;
}

實(shí)現(xiàn)步驟：

發(fā)光的方格，主要是通過(guò).light-inner的偽元素:before和:after來(lái)實(shí)現(xiàn)

上下的邊框是從中間往兩邊逐漸展開(kāi)：scaleX(0)到scaleX(1)

左右的邊框是從中間往上下兩邊展開(kāi)：scaleY(0)到scaleY(1)

形成了一個(gè)四方形從中間向邊角逐漸發(fā)光的效果：opacity:0到opacity:1。

其它就沒(méi)什么技巧了。

scale介紹

scale([, ])：指定對(duì)象的2D scale（2D縮放）。第一個(gè)參數(shù)對(duì)應(yīng)X軸，第二個(gè)參數(shù)對(duì)應(yīng)Y軸。如果第二個(gè)參數(shù)未提供，則默認(rèn)取第一個(gè)參數(shù)的值

scaleX()：指定對(duì)象X軸的（水平方向）縮放

scaleY()：指定對(duì)象Y軸的（垂直方向）縮放

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“如何使用CSS3偽元素實(shí)現(xiàn)逐漸發(fā)光的方格邊框”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!