How to use pure CSS to realize the animation effect of a ring rotation illusion (attached source)

This article brings you the content is about how to use pure CSS to achieve a circular rotation illusion animation effect, there is a certain reference value, the need for friends can refer to, I hope to help you.

Effect Preview

Source code Download

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

Code interpretation

Defines the DOM, which contains 10 child elements, and a child element <div> <div> within each child element <span> :

<figure class= "Container" >    <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 Container Dimensions:

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

Define the dimensions of the child elements, as well as the container:

. container {    position:relative;}. Container div {    position:absolute;    Width:inherit;    Height:inherit;}

Draw a small yellow square in the center 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;}

Increase the animation effect to move around the small square, the animation length will be used later, so the definition of variables:

. 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 the Bezier curve to adjust the animation's time function so that the small squares look like they are jumping around on the left and right sides:

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

Increase the animation of the small square deformation so that it looks like a humanoid effect of a squat jump:

. 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);    }}

This completes the animation of 1 blocks. Next, set the animation effect for multiple squares.

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 sub-elements so that the small squares are evenly distributed around the container for four weeks, and a circle is synthesized:

. container p {    transform:rotate (Calc (VAR (--n) * 40deg));

Setting the animation delay now looks like a bunch of small squares with a rounded inner edge spinning (but in fact no element is doing the rotational movement, the brain feels the rotation is an illusion):

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

Finally, paint the small squares:

. container span {    BACKGROUND-COLOR:HSL (Calc (VAR (--n) * 80deg), 100%, 70%);}

Done! To learn more about CSS, you can go to the PHP Chinese Web CSS Tutorial section to learn a bit.