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

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!

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.