How to use CSS3 to realize the gradually glowing grid frame
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.
