.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; }
当鼠标经过时候显示出来边框样式,并且带有过渡动画,并且实现边框连接处平滑过渡,鼠标离开时边框按照倒序收回