A code description of a gradually glowing border by CSS3 pseudo-elements

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

Summarize

"Recommended"

1. CSS3 Free Video Tutorial

2. CSS3 Complete picture Lowpoly animation effect of the process detailed

3. Teach you to use CSS to draw standard circular patterns

4. Use CSS to implement text hyperlink text to the right plus an arrow icon

5. Tutorial on using H5 and CSS3 forms validation