js实现网站鼠标停留边框划线变色动画

web页面中大家会经常用到一些边框放内容，一般都会加个边框颜色，然后就没什么其他的装饰了。今天老翰给大家带来一个新的边框美教程，下面简单实现网站鼠标放到边框上变色划线动画效果。

js

$(".box").hover(function() {
    $(this).find('.borderLeft').stop(true).animate({
        height: '100%'
    }, 300)
    $(this).find('.borderBottom').stop(true).delay(300).animate({
        width: '100%'
    }, 300)
    $(this).find('.borderRight').stop(true).animate({
        height: '100%'
    }, 300)
    $(this).find('.borderTop').stop(true).delay(300).animate({
        width: '100%'
    }, 300)
}, function() {
    $(this).find('.borderLeft').stop(true).delay(300).animate({
        height: 0
    }, 300)
    $(this).find('.borderBottom').stop(true).animate({
        width: 0
    }, 300)
    $(this).find('.borderRight').stop(true).delay(300).animate({
        height: 0
    }, 300)
    $(this).find('.borderTop').stop(true).animate({
        width: 0
    }, 300)
})

html

<div class="box">
    <div class="borderLine borderLeft"></div>
    <div class="borderLine borderTop"></div>
    <div class="borderLine borderRight"></div>
    <div class="borderLine borderBottom"></div>
<span class="rank">冠军</span>
</div>
<div class="box">
    <div class="borderLinea borderLeft"></div>
    <div class="borderLinea borderTop"></div>
    <div class="borderLinea borderRight"></div>
    <div class="borderLinea borderBottom"></div>
<span class="ranka">亚军</span>
</div>
<div class="box">
    <div class="borderLineb borderLeft"></div>
    <div class="borderLineb borderTop"></div>
    <div class="borderLineb borderRight"></div>
    <div class="borderLineb borderBottom"></div>
<span class="rankb">季军</span>
</div>

css

.box {
width:400px;
height:300px;
position:relative;
background-color:#B1DFBB;
float:left;
margin-left:100px;
margin-top:20px;
border-radius: 8px 8px 8px 8px;
}
.borderLine {
position:absolute;
background-color:#3498db;
}
.borderLinea {
position:absolute;
background-color:#2ecc71;
}
.borderLineb {
position:absolute;
background-color:#ff00b1;
}
.borderLeft {
height:0;
width:3px;
top:0;
left:0;
}
.borderRight {
bottom:0;
right:0;
width:3px;
height:0;
}
.borderTop {
height:3px;
width:0;
top:0;
right:0;
}
.borderBottom {
bottom:0;
left:0;
width:0;
height:3px;
}
.rank {
display:block;
color:#fff;
padding:4px;
position:absolute;
box-sizing:border-box;
width: 100%;
z-index:1;
border-radius:8px 8px 8px 8px;
text-align: center;
background-color:rgba(231, 76, 60, 0.4);
}
.ranka{
display:block;
color:#fff;
padding:4px;
position:absolute;
box-sizing:border-box;
width: 100%;
z-index:1;
border-radius:8px 8px 8px 8px;
text-align:center;
background-color:rgba(52, 152, 219, 0.4);;
}
.rankb {
display:block;
color:#fff;
padding:4px;
position:absolute;
box-sizing:border-box;
width:100%;
z-index:1;
border-radius:8px 8px 8px 8px;
text-align:center;
background-color:rgba(46, 204, 113, 0.4);
}