<div class="box">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <div class="content">
            <h1>What is lorem ipsum</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo voluptate, odio ea qui, eos, rem impedit similique reiciendis dignissimos cumque accusantium corporis voluptates! Quidem laboriosam consequatur quaerat molestias velit laborum asperiores debitis est minus rem, quasi nesciunt repudiandae dolore, officia culpa odio delectus. Pariatur a minus voluptatibus ea saepe alias, deleniti repudiandae reiciendis, tenetur quasi culpa fugit, asperiores assumenda cupiditate.</p>
        </div>
    </div>

 body {
            margin: 0;
            padding: 0;
            background: #073146;
            font-family: sans-serif;
        }

        .box {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 400px;
            height: 400px;
            background: #001e2d;
            box-sizing: border-box;
            overflow: hidden;
            box-shadow: 0 20px 50px rgba(0, 0, 0, .5);
            border: 2px solid rgba(0, 0, 0, .5);
        }

        .box:before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, .1);
            transition: 0.5s;
            pointer-events: none;
        }

        .box:hover:before {
            left: -50%;
            transform: skewX(-5deg)
        }

        .box .content {
            position: absolute;
            top: 15px;
            left: 15px;
            right: 15px;
            bottom: 15px;
            border: 2px solid #ffeb3b;
            padding: 30px;
            text-align: center;
            box-shadow: 0 5px 10px rgba(0, 0, 0, .5);
        }

        .box .content h1 {
            color: #fff;
            font-size: 30px;
            margin: 0 0 10px;
            padding: 0;
        }

        .box .content p {
            color: #fff;
            
        }
        .box span{
           position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: block;
            box-sizing: border-box;
        }
        .box span:nth-child(1){
            transform: rotate(0deg);
        }
        .box span:nth-child(2){
            transform: rotate(90deg);
        }
        .box span:nth-child(3){
            transform: rotate(180deg);
        }
        .box span:nth-child(4){
            transform: rotate(270deg);
        }
        .box span:nth-child(2):before{
            animation-delay: -2s;
        }
         .box span:nth-child(4):before{
            animation-delay: -2s;
        }
        .box span:before{
            content: '';
            position: absolute;
            width: 100%;
            height: 2px;
            background: #0093ff;
            animation: animate 4s linear infinite;
        }
        @keyframes animate{
            0%{
                transform: scaleX(0);
                transform-origin: left;
            }
            50%{
                transform: scaleX(1);
                transform-origin: left;
            }
            50.1%{
                transform: scaleX(1);
                transform-origin: right;
            }
            100%{
                transform: scaleX(0);
                transform-origin: right;
            }
        }
.created a{ color: #fff;
  position: absoulute;
  top: 50px;
  left: 50px;
  text-decoration: none; 
  font-size: 60px; 
}