首页 > 代码库 > 带感”的边框交互动画效果

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

 

技术分享

 

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

 

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

 

下面我们直接上代码:

 

首先准备基础代码,那四条边并不是真正的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控制等,感兴趣的童鞋可以多尝试!

 

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