一个过滤条件标签的css3动画效果

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

效果由上下左右各边框线中部像两边匀速逐步扩散