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:
="light"> Front-end Development Blog< ;/p> Focus on front-end development |
.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;} |
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!