Shulou(Shulou.com)06/01 Report--

Today, I would like to share with you how to use CSS3 to achieve the glowing box frame of the relevant knowledge, detailed content, clear logic, I believe that most people still know too much about this knowledge, so share this article for your reference, I hope you can get something after reading this article, let's take a look at it.

A code that uses pseudo elements to achieve the gradual glow of the border, mainly using the two attributes scale and opacity.

Html code

The glowing checkered border of CSS3

The glowing checkered border of CSS3

Css code

.light {

Background: # fff

Width: 180px

Height: 180px

Margin: 100px auto

Position: relative

Text-align: center

Color: # 333

Transform:translate3d (0d0j0pl 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 (0Phone1)

}

. light-inner:after {

Border-top: 0

Border-bottom: 0

Transform: scaleY (1J0)

}

.light: hover. Light-inner {

Background: # 458fd2

}

.light: hover .light-inner:before, .light: hover. Light-inner:after {

Opacity: 1

Transform: scale3d (1pm 1pm 1)

}

. light-inner p {

Transition: opacity .35s, transform 0.35s

Transform: translate3d (0pxPower0)

Color: # fff

Opacity: 0

Line-height: 30px

}

.light: hover. Light-inner p {

Transform: translate3d (0je 0je 0)

Opacity: 1

}

These are all the contents of the article "how to use CSS3 to achieve a glowing checkered frame". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.