SOURCE

console 命令行工具 X clear

                    
>
console
<div class='bb'></div>
.bb {
	position:relative;
    width: 400px;
    height: 200px;
    margin:40px auto 0;
    border: 1px solid black; 
  background: gainsboro;
}

.bb::after,.bb::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    content: '';
    z-index: 11;
    margin: -10px;
    box-shadow: inset 0 0 0 2px;
    animation: clipMe 8s linear infinite;
}

.bb::before {
    animation-delay: -4s
}

@keyframes clipMe {
    0%,100% {
        clip: rect(0,210px,2px,0)
    }

    16.7% {
        clip: rect(0,2px,220px,0)
    }

    33.3% {
        clip: rect(218px,210px,220px,0)
    }

    50.1% {
        clip: rect(218px,420px,220px,210px)
    }
    66.6% {
        clip: rect(0,420px,220px,418px)
    }
    83.3% {
        clip: rect(0,420px,2px,210px)
    }
}