Using CSS3 to make the gradual glow of the square border implementation steps

We know that if the use of pseudo-elements to achieve the gradual glow of the code, will use the scale and opacity of the two properties, then today to implement a CSS3 to make a gradual glow of the box border of the case, to help you better understand CSS3, together to see.

HTML code

<div>          <div> &LT;P&GT;CSS3 gradually glowing checkered border </p> <p>css3 a gradually glowing checkered border </p>         &LT;/DIV&GT;&LT;/DIV&GT;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;}

Believe that you have seen these cases you have mastered the method, more wonderful please pay attention to the PHP Chinese network other related articles!

Related reading:

What are the browsers that require compatible authentication in HTML?

A tutorial on the ad animation effect of the tourism network of imitation Cattle

HTML Web page optimization compression implementation steps