body,

html {

    width: 100%;

    min-height: 100%;

    display: flex;

    background: #fee;

}

​

.pesudo {

    position: relative;

    width: 200px;

    height: 100px;

    margin: auto;

    &::after {

        content: "";

        position: absolute;

        width: 180px;

        height: 80px;

        background: #fff;

        top: 50%;

        left: 50%;

        transform: translate(50px, -50%);

        z-index: 3;

        animation: move 4s infinite;

    }

    &::before {

        content: "";

        position: absolute;

        width: 200px;

        height: 100px;

        top: 50%;

        left: 50%;

        transform: translate(-50%, -50%);

        border-radius: 10px;

        background: linear-gradient(45deg, gold, deeppink);

        z-index: 2;

    }

}

​

@keyframes move {

    0% {

        transform: translate(50px, -50%);

    }

    50%,

    100% {

        transform: translate(-50%, -50%);

    }

}