css 特效

CSS3动画 transition 过渡，宽度由中间向两边发生过渡

效果图下：

.doctor-list-item{
    position: relative;
    height: 25%;
    cursor: pointer;
    padding: 0px 10px;
    box-sizing: border-box;
    border-width: 2px;
    border-style: solid;
    border-color: transparent;
    border-radius: 100%;
    // transition: all 1s ease;
    &::after{
        content: ' ';
        position: absolute;
        height: 100%;
        border-width: 2px;
        border-style: solid;
        border-left: 0px;
        border-right: 0px;
        bottom:0;

        border-color: transparent;
        width: 0px;
        left: 50%;
        transition: all 3s;
    }
    &::before{
        content: ' ';
        position: absolute;
        width: 100%;
        border-width: 2px;
        border-style: solid;
        border-top: 0px;
        border-bottom: 0px;
        left:0;

        border-color: transparent;
        height: 0px;
        bottom: 50%;
        transition: all 3s;
    }
    &:hover{
        &::after{
            border-color: #f00;
            width: 100%;
            left: 0;
       }
       &::before{
            border-color: #f00;
            height: 100%;
            bottom: 0;
       }
    }
}