怎么用CSS3实现逐渐发光的方格边框(CSS3,web开发)

一个使用伪元素来实现边框逐渐发光的代码，主要用到scale和opacity这两个属性。

Html代码

<div class="light">

<img src="https://qixn-bj.oss-cn-beijing.aliyuncs.com/seosjz/uploadfile/all/jpg/m4c4sal41pn.jpg"/>

<div class="light-inner">

<p>CSS3 逐渐发光的方格边框</p>

<p>CSS3 逐渐发光的方格边框</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;

}