css图片悬停边框,CSS悬停边框动画

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

}