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

今天小编给大家分享一下怎么用CSS3实现逐渐发光的方格边框的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。一个使用伪元素来实现边框逐渐发光的代码，主要用到scale和opacity这两个属性。

Html代码

CSS3

逐渐发光的方格边框CSS3

CSS3

逐渐发光的方格边框CSS3 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实现逐渐发光的方格边框”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注云技术行业资讯频道。

相关推荐: Linux文件权限与目录管理的知识点有哪些

这篇文章主要介绍“Linux文件权限与目录管理的知识点有哪些”，在日常操作中，相信很多人在Linux文件权限与目录管理的知识点有哪些问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”Linux文件权限与目录管理的知识点有哪些”的疑惑…