Shulou(Shulou.com)05/31 Report--

Today Xiaobian to share with you how to use CSS3 pseudo-elements to achieve gradually glowing square frame related knowledge points, detailed content, clear logic, I believe most people still know too much about this knowledge, so share this article for everyone to refer to, I hope you have some gains after reading this article, let's learn about it together.

The renderings are as follows:

HTML Code:

Front End Development Blog

Focus on front-end development

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;}

Implementation steps:

Glowing squares, mainly through.light-inner pseudo-elements:before and:after

The top and bottom borders are spread out from the middle to the sides: scaleX(0) to scaleX(1)

The left and right borders are spread from the center to the top and bottom sides: scaleY(0) to scaleY(1)

This creates an effect where the square gradually glows from the middle to the corners: opacity:0 to opacity:1.

There's nothing else.

Scale Introduction

scale([, ]): Specifies the 2D scale of the object. The first parameter corresponds to the X axis and the second parameter corresponds to the Y axis. If the second parameter is not provided, the value of the first parameter is assumed by default.

scaleX(): Specifies the (horizontal) scaling of the object's X axis

scaleY(): Specifies the (vertical) scaling of the object's Y axis

The above is "how to use CSS3 pseudo-elements to achieve a gradually glowing square border" all the content of this article, thank you for reading! I believe everyone has a great harvest after reading this article. Xiaobian will update different knowledge for everyone 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.