css边框样式（动画）

html：

<div class="wrap">
<a href="#">shui</a>

</div>

css：

body {
display: -webkit-box;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
height: 100vh;
background: #FFFACE;
}

body .wrap {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
width: 450px;
}

body .wrap a {
text-decoration: none;
color: #222;
padding: 20px;
background: #efefef;
text-transform: uppercase;
text-align: center;
position: relative;
margin: 20px;
flex-grow: 1;
cursor: pointer;
}

body .wrap a:before {
content: '';
position: absolute;
width: calc(100% + 4px);
height: calc(100% + 4px);
top: calc(2px/-1);
left: calc(2px/-1);

background: linear-gradient(to right, blue 0%, blue 100%), linear-gradient(to top, blue 50%, transparent 50%), linear-gradient(to top, blue 50%, transparent 50%), linear-gradient(to right, blue 0%, blue 100%), linear-gradient(to left, blue 0%, blue 100%);
background-size: 100% 2px, 2px 200%, 2px 200%, 0% 2px, 0% 2px;
background-position: 50% 100%, 0% 0%, 100% 0%, 100% 0%, 0% 0%;
background-repeat: no-repeat, no-repeat;
transition: transform 0.3s ease-in-out, background-position 0.3s ease-in-out, background-size 0.3s ease-in-out;
transform: scaleX(0) rotate(0deg);
transition-delay: 0.6s, 0.3s, 0s;
}

body .wrap a:hover:before {
background-size: 200% 2px, 2px 400%, 2px 400%, 55% 2px, 55% 2px;
background-position: 50% 100%, 0% 100%, 100% 100%, 100% 0%, 0% 0%;
transform: scaleX(1) rotate(0deg);
transition-delay: 0s, 0.3s, 0.6s;
}