How to realize the loader of throwing boxes with pure CSS
Editor to share with you how to use pure CSS to achieve box-throwing loader, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!
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:teal
}
Draw a piece of wood:
.loader {
Width:6em
Border-bottom:0.25emsolidwhite
Font-size:30px
Border-radius:0.125em
}
Draw a box on it with pseudo elements:
.loader {
Position:relative
}
.loader:: before {
Content:''
Position:absolute
Width:1em
Height:1em
Border:0.25emsolidwhite
Bottom:0
Left:0.5em
Border-radius:0.25em
}
Tilt the pattern to create the effect of the box on the slope:
.loader {
Transform:rotate (- 45deg)
Left:1em
Top:1em
}
Next, animate.
Let the box climb the hill step by step, climb to the top of the slope and climb again:
.loader:: before {
Animation:push4sinfinite
}
@ keyframespush {
0% {
Transform:translateX (0)
}
20% 25% {
Transform:translateX (1em)
}
40% par 45% {
Transform:translateX (2em)
}
60% par 65% {
Transform:translateX (3em)
}
80% {
Transform:translateX (0)
}
}
Increase the rolling effect of the box in the process of climbing:
@ keyframespush {
0% {
Transform:translateX (0) rotate (0deg)
}
20% 25% {
Transform:translateX (1em) rotate (calc (90deg*1))
}
40% par 45% {
Transform:translateX (2em) rotate (calc (90deg*2))
}
60% par 65% {
Transform:translateX (3em) rotate (calc (90deg*3))
}
80% {
Transform:translateX (0) rotate (0deg)
}
}
Increase the anthropomorphic effect of the box during climbing:
@ keyframespush {
0% {
Transform:translateX (0) rotate (0deg)
}
5% {
Transform:translateX (0) rotate (- 5deg)
}
20% 25% {
Transform:translateX (1em) rotate (calc (90deg*1+5deg))
}
30% {
Transform:translateX (1em) rotate (calc (90deg*1-5deg))
}
40% par 45% {
Transform:translateX (2em) rotate (calc (90deg*2+5deg))
}
50% {
Transform:translateX (2em) rotate (calc (90deg*2-5deg))
}
60% par 65% {
Transform:translateX (3em) rotate (calc (90deg*3+5deg))
}
70% {
Transform:translateX (3em) rotate (calc (90deg*3-5deg))
}
80% {
Transform:translateX (0) rotate (- 5deg)
}
}
Let the stick throw as the box climbs close to the top:
.loader {
Animation:throw3sinfinite
Transform-origin:20%
}
@ keyframesthrow {
0% par 70% pas 100% {
Transform:rotate (- 45deg)
}
80% {
Transform:rotate (- 135deg)
}
}
Increase the drop effect of the box as it climbs close to the top:
@ keyframespush {
70% {
Transform:translateX (3em) translateY (0) rotate (calc (90deg*3-5deg)) scale (1)
Filter:opacity (1)
}
80% {
Transform:translateX (0) translateY (- 5em) rotate (- 5deg) scale (0)
Filter:opacity (0.5)
}
90% {
Transform:translateX (0) translateY (0) rotate (0deg) scale (0)
}
}
Finally, hide the parts that may go beyond the page:
Body {
Overflow:hidden
}
The above is all the content of the article "how to use pure CSS to achieve box-throwing loader". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!
