本文主要介紹一個使用偽元素來實作邊框逐漸發光的程式碼,主要用到scale和opacity這兩個屬性。以下來看看詳細的介紹:
HTML程式碼:
程式碼如下 | |
="light"> <ner"pclass="light-ininner"> ##lt <ner"pclass="light-ininner"> ;/p>關注前端開發 |
# .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 |
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實作逐漸發光的方格邊框實例的詳細內容。更多資訊請關注PHP中文網其他相關文章!