Home > Web Front-end > CSS Tutorial > Detailed code explanation of gradually glowing borders through CSS3 pseudo-elements

Detailed code explanation of gradually glowing borders through CSS3 pseudo-elements

Y2J
Release: 2017-05-22 11:33:29
Original
1620 people have browsed it

This article mainly introduces you to the relevant information about using CSS3 pseudo-elements to realize gradually glowing square borders. The article gives detailed sample codes for your reference and study. It has certain reference and learning value for everyone. It is needed Friends, let’s take a look together.

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

The rendering is as follows:

HTML code:


<p class="light">
 <img src="http://tva2.sinaimg.cn/crop.0.0.180.180.180/6830a53bjw8f2qo4xzc2zj20500500t0.jpg"/>
 <p class="light-inner">
  <p>前端开发博客</p>
  <p>关注前端开发</p>
 </p>
</p>
Copy after login

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;
}
Copy after login

Implementation steps:

The glowing square is mainly realized through the pseudo elements of .light-inner: before and :after.

The upper and lower borders gradually expand from the middle to both sides: scaleX(0) to scaleX( 1) The left and right borders of

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

, forming a square that gradually glows from the middle to the corners: opacity :0 to opacity:1.

Others have no skills.

scale introduction

scale([, ]): Specify the 2D scale of object (2D scaling) . 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 taken by default

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

scaleY(< ;number>): Specify the (vertical) scaling of the Y-axis of the object

Summary

[Related recommendations]

1. CSS3 Free video tutorial

2. Detailed explanation of the process of completing the lowpoly animation effect of images with CSS3

3. Teach you how to draw a standard circular pattern with CSS

4. Use css to implement text hyperlinks and add an arrow icon to the right of the text

5. Tutorial on the use of H5 and CSS3 form verification

The above is the detailed content of Detailed code explanation of gradually glowing borders through CSS3 pseudo-elements. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template