Using CSS3 to realize luminous square border

This time to bring you to use CSS3 to achieve the light-emitting lattice border, with the CSS3 to achieve the light-emitting lattice border notes are what, the following is the actual case, together to see.

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

Believe that you have read the case of this article you have mastered the method, more exciting please pay attention to the PHP Chinese network other related articles!

Recommended reading:

CSS selector use of the detailed

Specific tips for using CSS margin
Refine the style of a radio box, check box