Home  >  Article  >  Web Front-end  >  Steps to use CSS3 to create a gradually glowing square border

Steps to use CSS3 to create a gradually glowing square border

php中世界最好的语言
php中世界最好的语言Original
2017-11-30 10:24:491513browse

We know that if you use pseudo-elements to implement the code of a gradually glowing border, you will use the two attributes scale and opacity. So today we will implement a CSS3 example of making a gradually glowing square border to help everyone. To better understand CSS3, let’s take a look.

Html code

<div>
         <img src="http://tva2.sinaimg.cn/crop.0.0.180.180.180/6830a53bjw8f2qo4xzc2zj20500500t0.jpg"/>
         <div>
                   <p>CSS3 逐渐发光的方格边框</p>
                   <p>CSS3 逐渐发光的方格边框</p>
         </div>
</div>
Css代码
.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;
}


I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!

Related reading:

What browsers require compatibility verification in HTML

imitate Tuniu Travel Network advertising animation Special effects tutorial

Steps to implement HTML webpage optimization and compression

The above is the detailed content of Steps to use CSS3 to create a gradually glowing square border. For more information, please follow other related articles on the PHP Chinese website!

Statement:
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