【特效】hover效果之十字动画
效果预览：http://www.gbtags.com/gb/rtreplayerpreview-standalone/3101.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:200px; border:1px solid red; margin:0 auto;}
.box{ width:0; height:0; position:relative; top:50%; left:50%;}
.box span{ position:absolute; transition:1s; background:green;}
.line_l{ width:0; height:1px; right:0; top:0;}
.line_r{ width:0; height:1px; left:0; top:0;}
.line_t{ width:1px; height:0; left:0; bottom:0;}
.line_d{ width:1px; height:0; left:0; top:0;}
.wrap:hover .line_l{ width:50px;}
.wrap:hover .line_r{ width:50px;}
.wrap:hover .line_t{ height:50px;}
.wrap:hover .line_d{ height:50px;}
