利用CSS3偽元素實(shí)現(xiàn)逐漸發(fā)光的方格邊框

本文介紹的是一個(gè)使用偽元素來實(shí)現(xiàn)邊框逐漸發(fā)光的代碼,主要用到scale和opacity這兩個(gè)屬性。下面來看看詳細(xì)的介紹:
效果圖如下:
HTML代碼:
<div class="light"> <img src="http://tva2.sinaimg.cn/crop.0.0.180.180.180/6830a53bjw8f2qo4xzc2zj20500500t0.jpg"/> <div class="light-inner"> <p>前端開發(fā)博客</p> <p>關(guān)注前端開發(fā)</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; }
實(shí)現(xiàn)步驟:
發(fā)光的方格,主要是通過.light-inner的偽元素:before和:after來實(shí)現(xiàn)
上下的邊框是從中間往兩邊逐漸展開:scaleX(0)到scaleX(1)
左右的邊框是從中間往上下兩邊展開:scaleY(0)到scaleY(1)
形成了一個(gè)四方形從中間向邊角逐漸發(fā)光的效果:opacity:0到opacity:1。
其它就沒什么技巧了。
scale介紹
scale(<number>[, <number>]):指定對(duì)象的2D scale(2D縮放)。第一個(gè)參數(shù)對(duì)應(yīng)X軸,第二個(gè)參數(shù)對(duì)應(yīng)Y軸。如果第二個(gè)參數(shù)未提供,則默認(rèn)取第一個(gè)參數(shù)的值
scaleX(<number>):指定對(duì)象X軸的(水平方向)縮放
scaleY(<number>):指定對(duì)象Y軸的(垂直方向)縮放
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助,如果有疑問大家可以留言交流,謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
- 在CSS3里引入的很多新特征中,這篇文章主要介紹了css3圖片邊框border-image的用法,具有一定的參考價(jià)值,有興趣的可以了解一下2017-06-30
css3 邊框、背景、文本效果的實(shí)現(xiàn)代碼
這篇文章主要介紹了css3 邊框、背景、文本效果的實(shí)現(xiàn)代碼,需要的朋友可以參考下2018-03-21CSS3實(shí)現(xiàn)內(nèi)凹圓角的實(shí)例代碼
本篇文章主要介紹了CSS3實(shí)現(xiàn)內(nèi)凹圓角的實(shí)例代碼,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-05-04- 這篇文章主要介紹了一篇文章帶你學(xué)習(xí)CSS3圖片邊框,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-11-04