请选择 进入手机版 | 继续访问电脑版

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

发表于 01-06 11:50 显示全部楼层 1 265

本帖最后由 蓝明周老师 于 2017-1-6 11:51 编辑

1.gif

像上图所示的这种边框动画效果在网页交互非常常用,咱们小码哥官网也有采用这种效果,给人的感觉就像标题所说的那样“带感”,好玩又有趣,而且也简单。


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


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


下面我们直接上代码:


首先准备基础代码,那四条边并不是真正的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>

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


1.jpg


然后将上下两条边的: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; }

得到以下效果:

3.gif

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


例如:

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


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


3.gif

上面这些效果是通过触发来实现的,除此之外,还可以通过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; }
}


得到效果:

2.gif

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



demo文件下载:

边框交互效果demo.zip




回复 使用道具
举报
luo888

发表于 01-06 12:34 显示全部楼层

学习了

回复 支持 反对 使用道具
举报

发表新文章
蓝明周老师

小码哥名师团队

0

学分

1637

学币

1787

积分

小码哥名师团队

Rank: 5Rank: 5

积分
1787

小码哥一周年勋章

Ta的主页 发消息
精华帖排行榜

精彩推荐

  • 关注小码哥教育