围着长方形的跑马灯

效果如图

这个效果是用的障眼法，用四条线在同一个方向运动。
代码如下：

<style type="text/css">

        *{
            margin: 0;
            padding: 0;
        }
        .big{
            margin: 150px auto;
            background: black;
            width:258px;
            height:307px;
            position: relative;
        }
        .big p{
            height: 1px;
            width: 50px;
            background: rgba(7,241,250,1);
            position: absolute;
        }
        .big p:nth-child(1){
            top:5px;
            left: 5px;
        }
        .big p:nth-child(2){
            height: 50px;
            width: 1px;
            bottom: 5px;
            right: 5px;
        }
        .big p:nth-child(3){
            bottom: 5px;
            right: 5px;
        }
        .big p:nth-child(4){
            height: 50px;
            width: 1px;
            top:5px;
            left: 5px;
        }
        .big p:nth-child(1){
            animation:pOne 4s linear infinite;
        }
        @keyframes pOne
        {
            0%{
                left: 5px;
                width: 50px;
            }
            10%{
                left: 5px;
                width: 100px;
            }
            40%{
                left:153px;
                width: 100px;
            }
            60%{
                left:253px;
                width: 0px;
            }
            80%{
                left:5px;
                width: 0px;
            }
            100%{
                left:5px;
                width: 50px;
            }
        }
        
        .big p:nth-child(2){
            animation:pTow 4s linear infinite;
        }
        @keyframes pTow
        {
            0%{
                top: 252px;
                height: 50px;
            }
            10%{
                top: 302px;
                height: 0px;
            }
            40%{
                top: 5px;
                height: 0px;
            }
            60%{
                top: 5px;
                height: 100px;
            }
            80%{
                top: 202px;
                height: 100px;
            }
            100%{
                top: 252px;
                height: 50px;
            }
        }
        
        
        .big p:nth-child(3){
            animation:pThree 4s linear infinite;
        }
        @keyframes pThree
        {
            0%{
                right: 5px;
                width: 50px;
            }
            10%{
                right: 5px;
                width: 100px;
            }
            40%{
                right:153px;
                width: 100px;
            }
            50%{
                right:253px;
                width: 0px;
            }
            80%{
                right:5px;
                width: 0px;
            }
            100%{
                right:5px;
                width: 50px;
            }
        }
        .big p:nth-child(4){
            animation:pFour 4s linear infinite;
        }
        @keyframes pFour
            {
                0%{
                    top: 5px;
                    height: 50px;
                }
                10%{
                    top: 5px;
                    height: 0px;
                }
                40%{
                    top: 302px;
                    height: 0px;
                }
                60%{
                    top: 202px;
                    height: 100px;
                }
                80%{
                    top: 5px;
                    height: 100px;
                }
                100%{
                    top: 5px;
                    height: 50px;
                }
            }
    </style>
     <div class="big">
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <div class="min"></div>
    </div>