带感”的边框交互动画效果

技术分享

效果的原理其实就是“四条边”发生宽度和高度的变化，上下两边是宽度变化，左右两边是高度的变化；

它们发生变化的方向也可以可控的，根据坐标设置即可控制。

下面我们直接上代码：

首先准备基础代码，那四条边并不是真正的border，而是通过标签加以宽高写出来，然后定位到四个方向；

<!-- html -->
<div class="box">
	<div class="topL"></div>
	<div class="rightL"></div>
	<div class="bottomL"></div>
	<div class="leftL"></div>
</div>
<div class="box box2">
	<div class="topL"></div>
	<div class="rightL"></div>
	<div class="bottomL"></div>
	<div class="leftL"></div>
</div>

<style>
/* 基础样式 */
.box{ width: 300px; height: 200px; border: 2px solid #ccc; margin: 100px 200px; position: relative; float: left;}
.box>div{background: purple; position: absolute; }
.topL{ width: 302px; height: 2px; left: -2px; top: -2px;}
.rightL{ width: 2px; height: 202px; right: -2px; top: -2px; }
.bottomL{ width: 302px; height: 2px; right: -2px; bottom: -2px;}
.leftL{ width: 2px; height: 202px; left: -2px; bottom: -2px; }
</style>

通过上面代码得到以下效果：

技术分享

然后将上下两条边的：width:0，左右两边的：height:0；

注意事项：“边框”的宽度和高度给多两个像素主要是解决“缺口”问题；

.topL{ width: 0; height: 2px; left: -2px; top: -2px;}
.rightL{ width: 2px; height: 0; right: -2px; top: -2px; }
.bottomL{ width: 0; height: 2px; right: -2px; bottom: -2px;}
.leftL{ width: 2px; height: 0; left: -2px; bottom: -2px; }

给父级盒子添加鼠标移上效果样式，也就是设置边框的宽度和高度变化，然后给四条边加上过渡属性：transition；

/* 鼠标移上触发效果 */
.box:hover .topL,.box:hover .bottomL{  width: 302px;}
.box:hover .leftL,.box:hover .rightL{  height: 202px;}

.box>div{background: purple; position: absolute; transition: all .3s linear; }

得到以下效果：

技术分享

如果需要修改边框变化的方向，可以通过修改定位的坐标来设置，例如上下两条边，如果设置为左对齐：left:0；那么边框的方向就是从左到右，如果设置为右对齐：right:0，那就是从右到左；左右两边也是如此，如果设置为顶对齐：top:0，那么就是由上到下，如果设置为地对齐：bottom:0，那么就是由下到上；

例如：

/* 不同位置的动画效果 */
.box2 .topL{ right: 0; top: -2px; left: auto;}
.box2 .bottomL{ left: 0; bottom: -2px; right: auto;}

可以得到两个方向不一样的效果：

技术分享

上面这些效果是通过触发来实现的，除此之外，还可以通过animation变成自动动画，效果也不错，请看下面代码；

<div class="box ani">
	<div class="topL"></div>
	<div class="rightL"></div>
	<div class="bottomL"></div>
	<div class="leftL"></div>
</div>
<div class="box box2 ani">
	<div class="topL"></div>
	<div class="rightL"></div>
	<div class="bottomL"></div>
	<div class="leftL"></div>
</div>

/* 给边框加上自动动画 */
.ani .topL,.ani .bottomL{ animation: lineS1 2s linear infinite; }
@keyframes lineS1{
	0%{ width: 0; }
	50%{ width: 302px; }
	100%{ width: 0; }
}
.ani .leftL,.ani .rightL{ animation: lineS2 2s linear infinite; }
@keyframes lineS2{
	0%{ height: 0; }
	50%{ height: 202px; }
	100%{ height: 0; }
}

得到效果：

技术分享

以上是完整效果展示。当然，制作类似效果还有其他方法，例如通过js或jq控制等，感兴趣的童鞋可以多尝试！