正文

【特效】hover效果之四线动画

IP云
IP云V管理员/5 阅读
08/08
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

效果预览：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;}

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