【特效】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;}

源码下载：http://pan.baidu.com/s/1hsiczTM

来源：https://www.cnblogs.com/xiaoxianweb/p/6343261.html