Effect preview

Press the "click preview" button on the right to preview the current page, and click the link to preview the whole screen.

https://codepen.io/comehope/pen/VEyoGj

Interactive Video

This video is interactive, you can pause the video at any time, edit the code in the video.

Please open it with chrome, safari, edge.

https://scrimba.com/p/pEgDAM/cppKmsd

Source code download

The full source code of the daily front-end combat series is downloaded from github:

https://github.com/comehope/front-end-daily-challenges

Code interpretation

Define dom. Containers contain 10 sub-elements, each representing a row:

<div class="container">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

Centralized display:

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

Define the container size in vmin units and arrange the child elements vertically:

.container {
    width: 100vmin;
    height: 100vmin;
    display: flex;
    flex-direction: column;
}

Set the background pattern of the child element to be a black-and-white block with a thin line at the top:

.container span {
    width: inherit;
    height: 10vmin;
    background: 
        linear-gradient(
            gray, gray 0.5vmin,
            transparent 0.5vmin, transparent
        ),
        repeating-linear-gradient(
            to right,
            black, black 10vmin,
            transparent 10vmin, transparent 20vmin
        )
}

Make a thin line at the bottom of the container:

.container {
    border-bottom: 0.5vmin solid gray;
}

Increase the animation effect and let the background of odd lines move half of the color block to the right. After moving, it looks like odd lines are left wide and narrow, even lines are left wide and right narrow. This is an illusion:

.container span:nth-child(odd) {
    animation: move 5s linear infinite;
}

@keyframes move {
    0%, 55%, 100% {
        background-position: 0 0;
    }

    5%, 50% {
        background-position: 5vmin 0;
    }
}

Let the background of even rows move, creating the illusion of the opposite direction:

.container span:nth-child(even) {
    animation: move 5s linear infinite reverse;
}

Be accomplished!