Using CSS3 pseudo-elements to realize the gradual glow of the square border implementation

This article mainly introduces the use of CSS3 pseudo-elements to achieve a gradual glow of the box border of the relevant data, the text gives a detailed sample code for everyone to reference the study, for everyone has a certain reference learning value, the need for friends below to see it together.

This article describes a code that uses pseudo-elements to achieve a gradual glow of a border, mainly using both the scale and opacity properties. Let's take a look at the detailed introduction below:

As follows:

HTML code:

<p class= "Light" >  <p class=" Light-inner ">  <p> Front-end development blog </p>  <p > Focus on front-end development </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-al Ign: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:

Luminous squares, mainly through the. Light-inner pseudo-elements: before and: After to implement

The upper and lower borders are gradually expanding from the middle to the sides: ScaleX (0) to ScaleX (1)

The left and right borders unfold from the middle to the top and bottom: ScaleY (0) to ScaleY (1)

Creates a four-square-sided effect that gradually glows from the middle corner: opacity:0 to Opacity:1.

There's no other tricks.

Scale Introduction

Scale (<number>[, <number>]): Specifies the object's 2D scales (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 (<number>): Specifies the (horizontal) scaling of the x axis of the object

ScaleY (<number>): Specifies the (vertical) scaling of the y-axis of an object