css3实现鼠标经过，边框线逆时针增显，鼠标移出顺时针消减

css3实现鼠标经过，边框线逆时针增显，鼠标移出顺时针消减（不知道怎么描述这个效果，姑且这么写吧）。

css代码如下：

 1 *{margin:0; padding:0;}
 2 .box{width:200px; height:200px; background-color:#eee; margin:50px; position:relative;}
 3 .box i{position:absolute; background-color:#f60; transition:all .1s;}
 4 .box i.i1{top:0; right:0; width:0; height:2px; transition-delay:.3s;}
 5 .box i.i2{top:0; left:0; width:2px; height:0; transition-delay:.2s;}
 6 .box i.i3{bottom:0; left:0; width:0; height:2px; transition-delay:.1s;}
 7 .box i.i4{bottom:0; right:0; width:2px; height:0; transition-delay:0s;}
 8 .box:hover i.i1{width:200px; transition-delay:0s;}
 9 .box:hover i.i2{height:200px; transition-delay:.1s;}
10 .box:hover i.i3{width:200px; transition-delay:.2s;}
11 .box:hover i.i4{height:200px; transition-delay:.3s;}

html代码如下：

1 <div class="box">
2   <i class="i1"></i>
3   <i class="i2"></i>
4   <i class="i3"></i>
5   <i class="i4"></i>
6 </div>

代码简单，就不提供demo了，效果请看下图

转载于:https://www.cnblogs.com/jokum/p/7462405.html