Steps to use CSS3 to create a gradually glowing square border

We know that if you use pseudo-elements to implement the code of a gradually glowing border, you will use the two attributes scale and opacity. So today we will implement a CSS3 example of making a gradually glowing square border to help everyone. To better understand CSS3, let’s take a look.

Html code

<div>
         <img src="http://tva2.sinaimg.cn/crop.0.0.180.180.180/6830a53bjw8f2qo4xzc2zj20500500t0.jpg"/>
         <div>
                   <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;
}

I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!

Related reading:

What browsers require compatibility verification in HTML

imitate Tuniu Travel Network advertising animation Special effects tutorial

Steps to implement HTML webpage optimization and compression

The above is the detailed content of Steps to use CSS3 to create a gradually glowing square border. For more information, please follow other related articles on the PHP Chinese website!