新手可以參考的 CSS3實作逐漸發光的方格邊框

一個使用僞元素來實作邊框逐漸發光的代碼，主要用到scale和opacity這兩個屬性。

HTML代碼：

<div class="light">
    <img src="http://tva2.sinaimg.cn/crop.0.0.180.180.180/6830a53bjw8f2qo4xzc2zj20500500t0.jpg"/>
    <div class="light-inner">
        <p>前端開發部落格</p>
        <p>關注前端開發</p>
    </div>
</div>
           

CSS代碼：

.light{
    background: #fff;
    width: px;
    height: px;
    margin: px auto;
    position: relative;
    text-align: center;
    color: #333;
    transform:translate3d(,,);

}
.light-inner{
    padding: px px ;
    pointer-events: none;
    position: absolute;
    left: ;
    top: ;
    bottom: ;
    right: ;
    text-align: center;
    transition: background s;
    backface-visibility: hidden;
}
.light-inner:before, .light-inner:after{
    display: block;
    content: "";
    position: absolute;
    left: px;
    top: px;
    right: px;
    bottom: px;
    border: px solid #fff;
    opacity: ;
    transition: opacity s, transform s;
}
.light-inner:before{
    border-left: ;
    border-right: ;
    transform:scaleX(,);
}
.light-inner:after{
    border-top: ;
    border-bottom: ;
    transform: scaleY(,);
}
.light:hover .light-inner{
    background: #458fd2
}
.light:hover .light-inner:before, .light:hover .light-inner:after{
    opacity: ;
    transform: scale3d(,,);
}

.light-inner p{
    transition: opacity .s, transform s;
    transform: translate3d(,px,);
    color: #fff;
    opacity: ;
    line-height: px;
}
.light:hover .light-inner p{
    transform: translate3d(,,);
    opacity: ;
}
           

實作步驟：

發光的方格，主要是通過.light-inner的僞元素:before和:after來實作

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

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

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

其它就沒什麼技巧了。

scale介紹

scale([, ])：指定對象的2D scale（2D縮放）。第一個參數對應X軸，第二個參數對應Y軸。如果第二個參數未提供，則預設取第一個參數的值

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

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