css3 下边框缓缓划过_css3边框加载 鼠标滑过，线能有一个闭合的过程

展开全部

我想的应该是四个边用四个标签模拟一下。。然后每个边用css3处理做动画。

不知道有没62616964757a686964616fe59b9ee7ad9431333337616634有更好的办法。

.outer{position:relative;width:100px;height:100px;border:3px solid #ccc;}

.outer i{}

.outer:before,

.outer:after{position:absolute;display:block;content:"";-webkit-transition:all 0.1s;}

.outer:before{top:-3px;left:-3px;width:0;height:0;border-top:3px solid #F00;-webkit-transition-delay: 0.3s;}

.outer:after{bottom:-3px;right:-3px;width:0;height:0;border-top:3px solid #F00;-webkit-transition-delay: 0.1s;}

.outer i:before,

.outer i:after{position:absolute;display:block;content:"";-webkit-transition:all 0.1s;}

.outer i:before{left:-3px;bottom:-3px;height:0;width:0;border-left:3px solid #F00;-webkit-transition-delay: 0s;}

.outer i:after{right:-3px;top:-3px;height:0;width:0;border-left:3px solid #F00;-webkit-transition-delay: 0.2s;}

.outer:hover:after,

.outer:hover:before{width:103px;}

.outer:hover i:after,

.outer:hover i:before{height:103px;}

.outer:hover:before{-webkit-transition-delay: 0s;}

.outer:hover:after{-webkit-transition-delay: 0.2s;}

.outer:hover i:after{-webkit-transition-delay: 0.1s;}

.outer:hover i:before{-webkit-transition-delay: 0.3s;}