Detailed explanation of using CSS3 pseudo-elements to realize gradually glowing square borders

This article mainly introduces you to the relevant information about using CSS3 pseudo-elements to realize gradually glowing square borders. The article gives detailed sample codes for your reference and study. It has certain reference and learning value for everyone. It is needed Friends, let’s take a look together.

This article introduces a code that uses pseudo elements to realize the gradual glow of the border, mainly using the two attributes of scale and opacity. Let’s take a look at the detailed introduction:

The rendering is as follows:

HTML code:

<p class="light">
 <img src="http://tva2.sinaimg.cn/crop.0.0.180.180.180/6830a53bjw8f2qo4xzc2zj20500500t0.jpg"/>
 <p class="light-inner">
  <p>前端开发博客</p>
  <p>关注前端开发</p>
 </p>
</p>

CSS code:

.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;
}

Implementation steps ：

The glowing square is mainly realized through the pseudo elements of .light-inner: before and :after

The upper and lower borders gradually expand from the middle to both sides: scaleX The left and right borders from (0) to scaleX(1)

are expanded from the middle to the upper and lower sides: scaleY(0) to scaleY(1)

forms a square from the middle to the corners. Gradually glowing effect: opacity:0 to opacity:1.

There are no other skills.

Introduction to scale

scale(d80b5def5ed1be6e26d91c2709f14170[, d80b5def5ed1be6e26d91c2709f14170]): Specify the 2D scale of the object (2D scaling). The first parameter corresponds to the X-axis, and the second parameter corresponds to the Y-axis. If the second parameter is not provided, the value of the first parameter is taken by default

scaleX(d80b5def5ed1be6e26d91c2709f14170): Specifies the (horizontal) scaling of the X-axis of the object

scaleY(< ;number>): Specify the (vertical) scaling of the Y-axis of the object

The above is the detailed content of Detailed explanation of using CSS3 pseudo-elements to realize gradually glowing square borders. For more information, please follow other related articles on the PHP Chinese website!