CSS3 implementation of gradually glowing square border example

小云云
Release: 2017-12-13 10:53:28
Original
3010 people have browsed it

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:

## The code is as follows
="light">

Front-end Development Blog< ;/p>

Focus on front-end development

CSS code:

The code is as follows
.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;

}

Implementation steps:

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

The upper and lower borders are from The middle is gradually expanded to both sides: scaleX(0) to scaleX(1)

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

to form a The effect of a square gradually glowing from the center to the corners: opacity:0 to opacity:1.

There are no other skills.

scale introduction

scale(

scaleX(

scaleY(

Related recommendations:

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!

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