div边框css动画

效果：

css:

.wrap{
            width:840px;
            margin:50px auto;
            height:300px;
        }

        .wrap a{
            float:left;
            width:180px;
            height:180px;
            margin:10px;
            border:2px solid #ddd;
            position:relative;
        }

        .wrap a span{
            display:inline-block;
            position:absolute;
            background:#4A64B4;
            transition:.5s;
        }

        .wrap a span.top{
            left:-2px;
            top:-2px;
            width:0;
            height:2px;
        }

        .wrap a span.right{
            right:-2px;
            bottom:0;
            width:2px;
            height:0;
        }

        .wrap a span.bottom{
            bottom:-2px;
            right:-2px;
            width:0px;
            height:2px;
        }

        .wrap a span.left{
            left:-2px;
            top:0;
            width:2px;
            height:0px;
        }

        .wrap a:hover .top,
        .wrap a:hover .bottom{
            width:calc(100% + 2px)
        }

        .wrap a:hover .right,
        .wrap a:hover .left{
            height:calc(100% + 2px)
        }

html：

 <div class="wrap">

        <a href="#">
            <span class="top"></span>
            <span class="right"></span>
            <span class="bottom"></span>
            <span class="left"></span>
        </a>

        <a href="#">
            <span class="top"></span>
            <span class="right"></span>
            <span class="bottom"></span>
            <span class="left"></span>
        </a>

        <a href="#">
            <span class="top"></span>
            <span class="right"></span>
            <span class="bottom"></span>
            <span class="left"></span>
        </a>

        <a href="#">
            <span class="top"></span>
            <span class="right"></span>
            <span class="bottom"></span>
            <span class="left"></span>
        </a>

    </div>