本文主要介绍一个使用伪元素来实现边框逐渐发光的代码，主要用到scale和opacity这两个属性。下面来看看详细的介绍：
HTML代码：
| 代码如下 | |
|
="light"> 立即学习“前端免费学习笔记（深入）”； @@##@@
前端开发博客
关注前端开发
| |
CSS代码：
| 代码如下 | |
|
.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; } | |
实现步骤：
发光的方格，主要是通过.light-inner的伪元素:before和:after来实现
上下的边框是从中间往两边逐渐展开：scaleX(0)到scaleX(1)
左右的边框是从中间往上下两边展开：scaleY(0)到scaleY(1)
形成了一个四方形从中间向边角逐渐发光的效果：opacity:0到opacity:1。
其它就没什么技巧了。
scale介绍
scale(
scaleX(
scaleY(
相关推荐：
