怎么用CSS3實現逐漸發光的方格邊框

今天小編給大家分享一下怎么用CSS3實現逐漸發光的方格邊框的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

一個使用偽元素來實現邊框逐漸發光的代碼，主要用到scale和opacity這兩個屬性。

Html代碼

<div class="light">

         <img src="https://cache.yisu.com/upload/information/20220117/488/54962.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;

}

以上就是“怎么用CSS3實現逐漸發光的方格邊框”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。