效果演示：
CSS代码：
<style>
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td { margin: 0; padding: 0; }
.box { width: 250px; margin: 0 auto;}
.border_animation {
border: 1px solid #eee;
width: 112px;
height: 112px;
position: relative; /* 必须 */
}
/* 共用属性 */
.border_animation .border_top,
.border_animation .border_right,
.border_animation .border_bottom,
.border_animation .border_left{
position: absolute; /* 必须 */
font-size: 0;
background: red; /* 可修改值 */
-webkit-transition: all 0.3s ease-out;/* 可修改值 */
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
/* 边框位置 (改变位置动画效果会改变) */
.border_animation .border_top,
.border_animation .border_left{
left: 0;
top: 0;
}
.border_animation .border_right,
.border_animation .border_bottom{
bottom: 0;
right: 0;
}
/* 边框宽度 */
.border_animation .border_top,
.border_animation .border_bottom {
height: 1px;
width: 0;
}
.border_animation .border_right,
.border_animation .border_left {
height: 0px;
width: 1px;
}
.border_animation img { display: block; vertical-align: middle; padding: 1px;}
.border_animation:hover .border_top,
.border_animation:hover .border_bottom{width: 112px}
.border_animation:hover .border_left,
.border_animation:hover .border_right { height: 112px}
</style>HTML代码:
<div class="box"> <div class="border_animation"> <div class="border_top"></div> <div class="border_right"></div> <div class="border_bottom"></div> <div class="border_left"></div> <div class="border"> <a target="_blank" href="#"> <img width="110" height="110" alt="" src="images/40.gif"> </a> </div> </div> </div>
