在layui论坛上闲逛时发现了一个用css3实现的边框动画，故简单实现了下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.container{position: relative;width: 200px;height: 100px;line-height: 100px;text-align: center;border: 1px solid #ccc;}
span{position: absolute;display: inline-block;content: none;width: 0;height: 0;font-size: 0;border: 0;transition: .5s;}
/*该动画实则是通过四个span标签分别设置边框，然后再增加宽度或者高度来实现的*/
.top{top: 0;right: 0;border-top: 2px solid #000;}
.right{bottom: 0;right: 0;border-right: 2px solid #000;}
.bottom{bottom: 0;left: 0;border-bottom: 2px solid #000;}
.left{top: 0;left: 0;border-left: 2px solid #000;}
.container:hover .top,.container:hover .bottom{width: 200px;}
.container:hover .left,.container:hover .right{height: 100px;}
/*animate动画，因为上面运用了transition动画，故下面的动画注释了*/
/*.top,.bottom{animation: bt .6s infinite ease-in-out;}
.left,.right{animation: bl .6s infinite ease-in-out}*/
@keyframes bt{
from{
width: 0;
}
25%{
width: 50px;
}
50%{
width: 100px;
}
75{
width: 150px;
}
to{
width: 200px;
}
}
@keyframes bl{
from{
height: 0;
}
25%{
height: 25px;
}
50%{
height: 50px;
}
75%{
height: 75px;
}
to{
height: 100px;
}
}
</style>
</head>
<body>
<div class="container">
KOBE BRYANT
<span class="top"></span>
<span class="right"></span>
<span class="bottom"></span>
<span class="left"></span>
</div>
</body>
</html>
也可以看看这篇文章
时间： 2024-10-13 12:10:07