.border_bottom {
width:40px;
height:4px;
background:#06C5D2;
position:absolute;
bottom:10px;
left:20px;
transition:all 0.2s ease-out;
}
.border_left {
width:4px;
height:0px;
background:#06C5D2;
position:absolute;
bottom:10px;
left:2px;
transition:all 0.5s ease-out 0.1s;
}
.border_right {
width:4px;
height:0px;
background:#06C5D2;
position:absolute;
bottom:10px;
right:-1px;
transition:all 0.5s ease-out 0.2s;
}
.border_top {
width:0px;
height:4px;
background:#06C5D2;
position:absolute;
bottom:210px;
left:0px;
transition:all 0.2s ease-out 0.5s;
}
.border {
width:450px;
height:230px;
border:1px solid red;
margin-left:50px;
}
当鼠标经过时候显示出来边框样式,并且带有过渡动画,并且实现边框连接处平滑过渡,鼠标离开时边框按照倒序收回