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(