鼠标移上边框动画练习

<style type="text/css">
.wrap{width:200px;height:200px;position:relative;background:#fafafa;}
.line{position:absolute;background-color:#EB5858;width:3px;height:3px;transition:all .38s;}
.line-top{top:0;left:0;width:200px;transition-delay:.38s;}
.line-right{top:0;right:0;height:200px;transition-timing-function:ease-in;}
.line-bottom{bottom:0;left:0;width:200px;transition-delay:.38s;}
.line-left{top:0;left:0;height:200px;transition-timing-function:ease-in;}
.wrap:hover .line-top{width:0;}
.wrap:hover .line-right{height:0;}
.wrap:hover .line-bottom{width:0;left:200px;}
.wrap:hover .line-left{height:0;top:200px;}
</style>
<div class="wrap">
<div class="line line-top"></div>
<div class="line line-right"></div>
<div class="line line-bottom"></div>
<div class="line line-left"></div>
</div>