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

This article introduces the relevant knowledge of "how to use pure CSS to realize the animation of Baolu mint". In the operation of the actual case, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Code interpretation

Define dom with only 1 element:

Centered display:

Body {

Margin:0

Height:100vh

Display:flex

Align-items:center

Justify-content:center

Background-color:silver

}

Define the container size:

.spinner {

Width:50vmin

Height:50vmin

Position:relative

}

Draw a black circle like a Baolu mint with before pseudo-elements:

.spinner:: before {

Content:''

Position:absolute

Box-sizing:border-box

Width:inherit

Height:inherit

Border:12.5vminsolid

Border-radius:50%

}

Next, animate the effect.

Set the depth of field of perspective:

Body {

Perspective:400px

}

Let the ring move on the z-axis:

.spinner:: before {

Animation:spin1.5sease-in-outinfinitebothreverse

}

@ keyframesspin {

0% 100% {

Transform:translateZ (10vmin)

}

60% {

Transform:translateZ (- 10vmin)

}

}

Let the ring tilt slightly at a large distance from the z-axis:

@ keyframesspin {

0% 100% {

Transform:translateZ (10vmin) rotateX (25deg)

}

60% {

Transform:translateZ (- 10vmin)

}

}

Increase the zoom effect:

@ keyframesspin {

0% 100% {

Transform:translateZ (10vmin) rotateX (25deg)

}

33% {

Transform:translateZ (- 10vmin) scale

}

60% {

Transform:translateZ (- 10vmin)

}

}

Draw a white circle with after pseudo-elements, and let its animation delay half the total length of the animation:

.spinner:: before

.spinner:: after {

/ * slightly * /

Animation:spin1.5sease-in-outinfinitebothreverse

}

.spinner:: after {

Border-color:white

Animation-delay:-0.75s

}

Next, make the animation effect of the container, in order not to be affected by the animation of child elements, temporarily shield the animation effect of pseudo elements.

.spinner:: before

.spinner:: after {

/ * animation:spin1.5sease-in-outinfinitebothreverse;*/

}

Increase the animation effect that the container rotates along the x-axis, and the animation time is twice the animation time of the child elements:

.spinner {

Animation:wobble3sease-in-outinfinite

}

@ keyframeswobble {

0% 100% {

Transform:rotateX (15deg)

}

50% {

Transform:rotateX (60deg)

}

}

Increase the animation of the container rotation along the y-axis:

@ keyframeswobble {

0% 100% {

Transform:rotateX (15deg) rotateY (60deg)

}

50% {

Transform:rotateX (60deg) rotateY (- 60deg)

}

}

Increase the animation effect of the overall rotation of the container:

@ keyframeswobble {

0% 100% {

Transform:rotateX (15deg) rotateY (60deg)

}

50% {

Transform:rotateX (60deg) rotateY (- 60deg) rotate (180deg)

}

}

Open the animation of the child elements so that the animation of the child elements overlaps the animation of the container:

.spinner:: before

.spinner:: after {

Animation:spin1.5sease-in-outinfinitebothreverse

}

Finally, make the child elements move in 3D space:

.spinner {

Transform-style:preserve-3d

}

This is the end of the content of "how to use pure CSS to realize the animation of Baolu mint". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.