【特效】hover效果之四线动画
效果预览：http://www.gbtags.com/gb/rtreplayerpreview-standalone/3102.htm
html:
<div class="wrap">
<div class="box">
<span class="line_l"></span>
<span class="line_r"></span>
<span class="line_t"></span>
<span class="line_d"></span>
</div>
</div>
css:
.wrap{ width:200px; height:150px; border:1px solid red; margin:0 auto; position:relative;}
.wrap span{ position:absolute; background:green; transition:1s; opacity:0;}
.line_l{ width:1px; height:50px; left:50px; top:50px; margin-top:25px;}
.line_r{ width:1px; height:50px; left:150px; top:50px; margin-top:-25px;}
.line_t{ width:100px; height:1px; left:50px; top:50px; margin-left:-50px;}
.line_d{ width:100px; height:1px; left:50px; top:100px; margin-left:50px;}
.wrap:hover span{ opacity:1;}
.wrap:hover .line_l{ margin-top:0;}
.wrap:hover .line_r{ margin-top:0;}
.wrap:hover .line_t{ margin-left:0;}
.wrap:hover .line_d{ margin-left:0;}
