Html
    Css
    Js

    
                        
.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;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

鼠标滑过显示边框动画(原创)

当鼠标经过时候显示出来边框样式,并且带有过渡动画,并且实现边框连接处平滑过渡,鼠标离开时边框按照倒序收回

0