css3鼠标滑过实现动画线条边框

<template>
    <div class="parentBox">
        <div class="contantBox">
            <ul class="shelfBox">
                <li>
                    <div class="bigBox">
                        <div class="itemBox">
                            <div class="textBox">
                                <p>1.无需下载安装包</p>
                                <p>2.可多人同时编辑</p>
                                <p>3.无需下载安装包</p>
                                <p>4.可实时预览内容</p>
                            </div>
                            <div class="beginbox"></div>
                            <div class="bomBox"></div>
                            <div class="leftBox"></div>
                            <div class="topBox"></div>
                            <div class="rightBox"></div>
                            <div class="pictureBox"><i class="circleBox"></i></div>
                        </div>
                        <div class="iconBox">
                            <div class="circleBox">+</div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>
<style scoped>
    .parentBox {
        margin: 0;
        padding: 0;
        border: 0;
        font: inherit;
        font-size: 100%;
        vertical-align: baseline
    }

    ol,
    ul {
        list-style: none
    }

    table {
        border-collapse: collapse;
        border-spacing: 0
    }

    caption,
    td,
    th {
        text-align: left;
        font-weight: 400;
        vertical-align: middle
    }

    .bigBox img {
        border: none
    }


    .bigBox {
        text-decoration: none
    }

    .bigBox:hover {
        cursor: pointer;
    }

    img {
        max-width: 100%;
        vertical-align: middle
    }

    .shelfBox:after,
    .shelfBox:before {
        content: " ";
        display: table
    }

    .shelfBox:after {
        clear: both
    }

    .contantBox {
        position: relative;
        background-color: #fff;
        zoom: 1
    }


    .contantBox ul {
        position: absolute;
        left: 0;
        top: 0;
        width: 1218px;
        height: 432px;
        padding-top: 5px;
        transition: left .8s ease-in-out
    }

    .contantBox li {
        float: left;
        width: 406px;
        height: 216px
    }

    .contantBox li .bigBox {
        position: relative;
        display: block;
        width: 100%;
        height: 216px;
        padding: 10px 0 0 92px;
        zoom: 1
    }

    .contantBox .itemBox {
        position: relative;
        width: 274px;
        height: 186px;
        padding: 20px 0 0 60px;
        background: url('https://hovertree.com/texiao/css3/32/images/hovertree10tanjpxxxxblxpxxxxxxxxxx-274-186.png') 0 0 no-repeat;
        color: #00a0ff;
        zoom: 1
    }

    .textBox {
        color: #666;
    }
    .textBox p{
        margin: 14px 10px;
    }

    .contantBox .beginbox {
        position: absolute;
        bottom: -2px;
        right: -2px;
        width: 34px;
        height: 10px;
        background-color: #fff
    }

    .contantBox .bomBox {
        position: absolute;
        left: -2px;
        bottom: -2px;
        width: 295px;
        height: 15px;
        background-color: #fff
    }

    .contantBox .leftBox {
        position: absolute;
        left: -2px;
        top: -2px;
        width: 15px;
        height: 189px;
        background-color: #fff
    }

    .contantBox .topBox {
        position: absolute;
        right: -2px;
        top: -2px;
        width: 295px;
        height: 15px;
        background-color: #fff
    }

    .contantBox .rightBox {
        position: absolute;
        right: -2px;
        bottom: -2px;
        width: 15px;
        height: 189px;
        background-color: #fff
    }

    .contantBox .iconBox {
        position: absolute;
        left: 53px;
        top: 35px;
        width: 100px;
        height: 110px;
        padding-top: 12px;
        background-color: #fff;
        z-index: 11
    }

    .contantBox .iconBox .circleBox {
        width: 80px;
        height: 80px;
        line-height: 80px;
        background: url('https://hovertree.com/texiao/css3/32/images/hovertree1.fjxivxxxxbqxvxxxxxxxxxx-80-80.png') 0 0 no-repeat;
        text-align: center;
        color: #359EFB;
        font-size: 28px;
    }

    .contantBox .iconBox .iconfont {
        font-size: 32px;
        color: #00a0ff
    }

    .contantBox .pictureBox {
        position: absolute;
        right: -8px;
        bottom: -3px;
        width: 0;
        height: 16px;
        background-color: #fff;
        overflow: hidden
    }

    .contantBox .pictureBox .circleBox {
        float: right;
        width: 17px;
        height: 16px;
        background: url('https://hovertree.com/texiao/css3/32/images/hovertree15pjohvxxxxcaxpxxxxxxxxxx-16-16.png') 0 0 no-repeat
    }

    .contantBox .bigBox:hover .textBox {
        color: #00a0ff
    }

    .contantBox .bigBox:hover .bomBox {
        animation: borderslideBottom .15s linear 0s 1;
        animation-fill-mode: forwards
    }

    .contantBox .bigBox:hover .leftBox {
        animation: bordersildeLeft .2s linear .15s 1;
        animation-fill-mode: forwards
    }

    .contantBox .bigBox:hover .topBox {
        animation: bordersildeTop .15s linear .35s 1;
        animation-fill-mode: forwards
    }

    .contantBox .bigBox:hover .rightBox {
        animation: bordersildeRight .2s linear .5s 1;
        animation-fill-mode: forwards
    }

    .contantBox .bigBox:hover .pictureBox {
        animation: bordersildeEnd .1s linear .7s 1;
        animation-fill-mode: forwards
    }


    @-moz-keyframes borderslideBottom {
        from {
            width: 295px
        }

        to {
            width: 0
        }
    }

    @-webkit-keyframes borderslideBottom {
        from {
            width: 295px
        }

        to {
            width: 0
        }
    }

    @keyframes borderslideBottom {
        from {
            width: 295px
        }

        to {
            width: 0
        }
    }

    @-moz-keyframes bordersildeLeft {
        from {
            height: 189px
        }

        to {
            height: 0
        }
    }

    @-webkit-keyframes bordersildeLeft {
        from {
            height: 189px
        }

        to {
            height: 0
        }
    }

    @keyframes bordersildeLeft {
        from {
            height: 189px
        }

        to {
            height: 0
        }
    }

    @-moz-keyframes bordersildeTop {
        from {
            width: 295px
        }

        to {
            width: 0
        }
    }

    @-webkit-keyframes bordersildeTop {
        from {
            width: 295px
        }

        to {
            width: 0
        }
    }

    @keyframes bordersildeTop {
        from {
            width: 295px
        }

        to {
            width: 0
        }
    }

    @-moz-keyframes bordersildeRight {
        from {
            height: 189px
        }

        to {
            height: 0
        }
    }

    @-webkit-keyframes bordersildeRight {
        from {
            height: 189px
        }

        to {
            height: 0
        }
    }

    @keyframes bordersildeRight {
        from {
            height: 189px
        }

        to {
            height: 0
        }
    }

    @-moz-keyframes bordersildeEnd {
        from {
            width: 0
        }

        to {
            width: 34px
        }
    }

    @-webkit-keyframes bordersildeEnd {
        from {
            width: 0
        }

        to {
            width: 34px
        }
    }

    @keyframes bordersildeEnd {
        from {
            width: 0
        }

        to {
            width: 34px
        }
    }
</style>