边框运动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style type="text/css">
.box{ margin-top: 20px; position: relative; width: 200px; height: 100px; border: 1px solid #999999; transition: border .2s linear; }
/*.box:hover{ border: 1px solid blue;}*/
.box span:nth-child(1){width: 0%; height: 1px; position: absolute; top: 0; left: 0; background-color: blue;}
.box span:nth-child(2){width: 1px; height: 0%; position: absolute; top: 0; right: 0;background-color: blue;}
.box span:nth-child(3){width: 0%; height: 1px; position: absolute; bottom: 0; right: 0; background-color: blue;}
.box span:nth-child(4){width: 1px; height: 0%; position: absolute; bottom: 0; left: 0;background-color: blue;}
/*.box:hover span:nth-child(1) { transition: all .1s ease-in; width: 100%;}
.box:hover span:nth-child(2) { transition: all .1s ease-in .1s ; height: 100%;}
.box:hover span:nth-child(3) { transition: all .1s ease-in .2s ; width: 100%;}
.box:hover span:nth-child(4) { transition: all .1s ease-in .3s ; height: 100%;}*/
</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<div class="box">
<span></span><span></span><span></span><span></span>
</div>
<div class="box">
<span></span><span></span><span></span><span></span>
</div>
<div class="box">
<span></span><span></span><span></span><span></span>
</div>
<div class="box">
<span></span><span></span><span></span><span></span>
</div>
</body>
<script type="text/javascript">
$(function(){
$(".box").mouseenter(function(){
$(this).css({"border": "1px solid blue"});
$(this).find("span").eq(0).css({"transition": "all .1s ease-in","width": "100%"});
$(this).find("span").eq(1).css({"transition": "all .1s ease-in .1s","height": "100%"});
$(this).find("span").eq(2).css({"transition": "all .1s ease-in .2s","width": "100%"});
$(this).find("span").eq(3).css({"transition": "all .1s ease-in .3s","height": "100%"});
})
$(".box").mouseleave(function(){
$(this).css({"border": "1px solid #999999"});
$(this).find("span").eq(3).css({"transition": "all .1s ease-in","height": "0%"});
$(this).find("span").eq(2).css({"transition": "all .1s ease-in .1s","width": "0%"});
$(this).find("span").eq(1).css({"transition": "all .1s ease-in .2s","height": "0%"});
$(this).find("span").eq(0).css({"transition": "all .1s ease-in .3s","width": "0%"});
})
})
</script>
</html>
