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了,效果请看下图
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步