怎么利用CSS3 逐渐发光的方格边框

2019-09-13 郑州网站建设  

一个使用伪元素来实现边框逐渐发光的代码,主要用到scaleopacity这两个属性。

Html代码

<div class="light">

         <img src=http://www.divcss5.com/css3-style/"http:/tva2.sinaimg.cn/crop.0.0.180.180.180/6830a53bjw8f2qo4xzc2zj20500500t0.jpg"/>

         <div class="light-inner">

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


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/dede/2138.html转载请标明出处,谢谢合作!
标签:
  • 边框
  • 元素
  • 使用
  • CSS3
  • 一个
  • 实现
  • 逐渐