How to use pure CSS to achieve an animation effect of a ring rotation illusion (source code attached)

The content of this article is about how to use pure CSS to achieve the animation effect of a ring rotation illusion. 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 <div> sub-elements, each <code><div> sub-element also contains There is a <code><span></span> child element:

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

Define the size of the container:

.container {
    width: 17em;
    height: 17em;
    font-size: 16px;
}

Define the size of the child element, which is the same as the container:

.container {
    position: relative;
}

.container div {
    position: absolute;
    width: inherit;
    height: inherit;
}

Draw a small yellow square in the middle of the child element:

.container div {
    display: flex;
    align-items: center;
    justify-content: center;
}

.container span {
    position: absolute;
    width: 1em;
    height: 1em;
    background-color: yellow;
}

Add the animation effect of moving the small square left and right. The animation duration will be used later, so it is defined as a variable:

.container span {
    --duration: 2s;
    animation: move var(--duration) infinite;
}

@keyframes move {
    0%, 100% {
        left: calc(10% - 0.5em);
    }

    50% {
        left: calc(90% - 0.5em);
    }
}

Use Bezier curves to adjust the time function of the animation so that the small square looks like it is jumping around on the left and right sides:

.container span {
    animation: move var(--duration) cubic-bezier(0.6, -0.3, 0.7, 0) infinite;
}

Add the animation of the small square's deformation to make it look like it is squatting and jumping. Anthropomorphic effect:

.container span {
    animation: 
        move var(--duration) cubic-bezier(0.6, -0.3, 0.7, 0) infinite,
        morph var(--duration) ease-in-out infinite;
}

@keyframes morph {
    0%, 50%, 100% {
        transform: scale(0.75, 1);
    }

    25%, 75% {
        transform: scale(1.5, 0.5);
    }
}

At this point, the animation of 1 block is completed. Next, set the animation effects of multiple blocks.

Define CSS subscript variables for child elements:

.container div:nth-child(1) { --n: 1; }
.container div:nth-child(2) { --n: 2; }
.container div:nth-child(3) { --n: 3; }
.container div:nth-child(4) { --n: 4; }
.container div:nth-child(5) { --n: 5; }
.container div:nth-child(6) { --n: 6; }
.container div:nth-child(7) { --n: 7; }
.container div:nth-child(8) { --n: 8; }
.container div:nth-child(9) { --n: 9; }

Rotate the child elements so that the small squares are evenly distributed around the container and form a circle:

.container p {
    transform: rotate(calc(var(--n) * 40deg));
}

Set the animation delay. Now it looks like a group of small squares rotating against the inner edge of a circle (but in fact, no elements are rotating, and the rotation felt by the brain is an illusion):

.container span {
    animation-delay: calc(var(--duration) / 9 * var(--n) * -1);
}

Finally, color the small squares:

.container span {
    background-color: hsl(calc(var(--n) * 80deg), 100%, 70%);
}

You’re done! If you want to know more about css, you can go to the css tutorial column on the php Chinese website to learn it.

Related recommendations:

How to use pure CSS to implement the motion model animation of the sun, the earth and the moon

How to use pure CSS to implement a Overhead view of the football field (source code attached)