How to use pure CSS to achieve the illusion of a chessboard animation (source code attached)

The content of this article is about how to use pure CSS to realize the illusion animation of the chessboard (source code attached). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Effect preview

Source code download

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

Code Interpretation

Define dom, the container contains 10 sub-elements, each sub-element represents a row:

<div>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

Centered 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 elements to spaced black and white blocks 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
        )
}

Add a thin line at the bottom of the container:

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

Add an animation effect to move the background of the odd-numbered rows to the right by half a color block. After moving, it will look like the odd-numbered rows are wider on the right. Narrow on the left, wide on the left and narrow on the right of even-numbered rows, 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 the even-numbered rows also move, creating the illusion of the opposite direction:

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

Done!

The above is the detailed content of How to use pure CSS to achieve the illusion of a chessboard animation (source code attached). For more information, please follow other related articles on the PHP Chinese website!