Shulou(Shulou.com)06/01 Report--

In this article Xiaobian for you to introduce in detail "how to use pure CSS to achieve a ring rotation illusion animation effect", the content is detailed, the steps are clear, the details are handled properly, I hope this "how to use pure CSS to achieve a circle rotation illusion animation effect" article can help you solve doubts, following the editor's ideas slowly in-depth, together to learn new knowledge.

Effect picture:

Code interpretation

Define dom. The container contains 10 child elements, and each child element has one child element:

Define the container size:

.container {

Width:17em

Height:17em

Font-size:16px

}

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

.container {

Position:relative

}

.containerdiv {

Position:absolute

Width:inherit

Height:inherit

}

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

.containerdiv {

Display:flex

Align-items:center

Justify-content:center

}

.containerspan {

Position:absolute

Width:1em

Height:1em

Background-color:yellow

}

Add the animation effect that makes the small square move left and right, and the animation duration will be used later, so it is defined as a variable:

.containerspan {

-- duration:2s

Animation:movevar (--duration) infinite

}

@ keyframesmove {

0% 100% {

Left:calc (10%-0.5em)

}

50% {

Left:calc (90%-0.5em)

}

}

Use the Bezier curve to adjust the time function of the animation to make the cube look as if it were jumping around on the left and right sides:

.containerspan {

Animation:movevar (--duration) cubic-bezier (0.6 language, 0.3, 0.7) infinite

}

Add a small square deformation animation to make it look like a squat take-off anthropomorphic effect:

.containerspan {

Animation:

Movevar (--duration) cubic-bezier (0.6 language, 0.3, 0.7) infinite

Morphvar (--duration) ease-in-outinfinite

}

@ keyframesmorph {

0% 50% 50% 100% {

Transform:scale (0.75)

}

25% 75% {

Transform:scale (1.5 and 0.5)

}

}

At this point, the animation of 1 square is completed. Next, animate multiple squares.

Define CSS subscript variables for child elements:

.containerdiv:nth-child (1) {--NRV 1;}

.containerdiv:nth-child (2) {--NRV 2;}

.containerdiv:nth-child (3) {--NRV 3;}

.containerdiv:nth-child (4) {--NRV 4;}

.containerdiv:nth-child (5) {--NRV 5;}

.containerdiv:nth-child (6) {--NRV 6;}

.containerdiv:nth-child (7) {--NRV 7;}

.containerdiv:nth-child (8) {--NRV 8;}

.containerdiv:nth-child (9) {--NRV 9;}

The rotating rotor element, so that the small squares are evenly distributed around the container, forming a circle:

.containerp {

Transform:rotate (calc (var (--n) * 40deg))

}

Set the animation delay, and now it looks like a group of small squares spinning against the inner edge of a circle (but actually no element is rotating, and the rotation sensed by the brain is an illusion):

.containerspan {

Animation-delay:calc (var (--duration) / 9*var (--n) *-1)

}

Finally, color the little square:

.containerspan {

Background-color:hsl (calc (var (--n) * 80deg), 100% pr 70%)

}

Read here, this article "how to use pure CSS to achieve a circle rotation illusion animation effect" article has been introduced, want to master the knowledge of this article also need to practice and use in order to understand, if you want to know more related articles, welcome to pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.