Html
    Css
    Js
.c-btn {
	color:#ffffff;
	display:inline-block;
	height:100%;
	position:relative;
	text-decoration:none;
}
.c-btn::after {
	content:"";
	display:block;
	position:absolute;
}
.c-btn::before {
	content:"";
	display:block;
	position:absolute;
}
.c-btn--border-line {
	background:rgba(0,0,0,0) none repeat scroll 0 0;
	border:0 none;
	box-shadow:0 0 0 0 transparent inset;
	box-sizing:border-box;
}
.c-btn--border-line::after,.c-btn--border-line::before {
	border:1px solid transparent;
	box-sizing:border-box;
	height:0;
	width:0;
}
.c-btn--border-line::after {
	left:0;
	top:0;
	transition:border-color 0s ease-in 0.8s,width 0.2s ease-in 0.6s,height 0.2s ease-in 0.4s;
}
.c-btn--border-line::before {
	bottom:0;
	right:0;
	transition:border-color 0s ease-in 0.4s,width 0.2s ease-in 0.2s,height 0.2s ease-in 0s;
}
.c-btn--border-line:hover::after,.c-btn--border-line:hover::before {
	height:100%;
	width:100%;
}
.c-btn--border-line:hover::after {
	border-right-color:#367dff;
	border-top-color:#367dff;
	transition:width 0.2s ease-out 0s,height 0.2s ease-out 0.2s;
}
.c-btn--border-line:hover::before {
	border-bottom-color:#367dff;
	border-left-color:#367dff;
	transition:border-color 0s ease-out 0.4s,width 0.2s ease-out 0.4s,height 0.2s ease-out 0.6s;
}
.c-btn--line::after {
	background-color:#367dff;
	bottom:0;
	transform:scaleX(0);
	transform-origin:right center 0;
	transition:transform 0.6s cubic-bezier(0.55,0,0.1,1) 0s,-webkit-transform 0.6s cubic-bezier(0.55,0,0.1,1) 0s;
}
.c-btn--line:hover::after {
	transform:scaleX(1);
	transform-origin:left center 0;
	transition:transform 0.6s cubic-bezier(0.55,0,0.1,1) 0s,-webkit-transform 0.6s cubic-bezier(0.55,0,0.1,1) 0s;
}
.nav-zi a {
	width:200px;
	border:1px solid #ededed;
	display:block;
	height:40px;
	line-height:40px;
	margin-left:10px;
	margin-right:10px;
	padding-left:40px;
	padding-right:20px;
	transition:all 0.6s ease-in 0s;
	color:red;
}
.cover-fields a,.jz a {
	color:#69696d;
}
.c-btn--border-line {
	background:rgba(0,0,0,0) none repeat scroll 0 0;
	border:0 none;
	box-shadow:0 0 0 0 transparent inset;
	box-sizing:border-box;
}
.c-btn {
	color:#ffffff;
	display:inline-block;
	height:100%;
	position:relative;
	text-decoration:none;
}

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

CSS悬停边框动画

2
      bill0
      2017/6/18 13:33:00
      他只不过是给别人一种思路罢了 回复
      罄?一瞥0
      2017/6/15 17:27:07