How to use pure CSS to realize the animation of Baolu mint
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!
