CSS3 implementation of gradually glowing square border example

This article mainly 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:

HTML code:

## The code is as follows

="light"> Front-end Development Blog< ;/p> Focus on front-end development

CSS code:

The code is as follows

.light{ background:#fff; width:180px; height:180px; margin:100pxauto; position:relative; text-align:center; color:#333; transform:translate3d(0 ,0,0); } .light-inner{ padding:60px30px0; pointer-events: none; position:absolute; left:0; top:0; bottom:0; right: 0; text-align:center; transition: background0.35s; backface-visibility:hidden; } .light-inner:before, .light-inner:after{ display:block; content:""; position:absolute; left:30px; top:30px; right:30px; bottom:30px; border:1pxsolid#fff; opacity:0; transition: opacity0.35s, transform0.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, transform0.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 luminous square is mainly realized through the pseudo elements of .light-inner: before and :after.

The upper and lower borders are from The middle is gradually expanded to both sides: scaleX(0) to scaleX(1)

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

to form a The effect of a square gradually glowing from the center to the corners: opacity:0 to opacity:1.

There are no other skills.

scale introduction

scale(

scaleX(

scaleY(

Related recommendations:

Explanation on how to set the border, background and size of elements in CSS3

Detailed explanation of examples of using css to achieve multiple border effects on a single element

css How to set a translucent border in

The above is the detailed content of CSS3 implementation of gradually glowing square border example. For more information, please follow other related articles on the PHP Chinese website!