html
<span class="demo">全部</span>
css
.demo{
position: relative;
display: inline-block;
height: 25px;
line-height: 25px;
color: #999;
position: relative;
padding: 0px 10px 0px 10px;
box-shadow: inset 0 0 0 1px #333;
cursor: pointer;
}
.demo::before, .demo::after {
top: 0;
left: 0;
height: 100%;
width: 100%;
content: '';
position: absolute;
transform-origin: center;
box-sizing: border-box;
}
.demo::before {
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
transform: scale3d(0, 1, 1);
transition: 0.5s all;
}
.demo::after {
border-left: 1px solid #fff;
border-right: 1px solid #fff;
transform: scale3d(1, 0, 1);
transition: 0.5s all;
}
.demo:hover::before,.demo:hover:after {
transform: scale3d(1, 1, 1);
transition: transform 0.5s;
}
效果由上下左右各边框线中部像两边匀速逐步扩散