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

This article will explain in detail how to use pure CSS to achieve the animation effect of small ball jumping steps. The editor thinks it is very practical, so I share it for you to make a reference. I hope you can get something after reading this article.

Code interpretation

Define dom. The container contains 5 elements, representing 5 steps:

Centered display:

Body {

Margin:0

Height:100vh

Display:flex

Align-items:center

Justify-content:center

Background-color:black

}

Define the container size:

.loader {

Width:7em

Height:5em

Font-size:40px

}

Draw five steps:

.loader {

Display:flex

Justify-content:space-between

Align-items:flex-end

}

.loaderspan {

Width:1em

Height:1em

Background-color:white

}

Sort the five steps from low to high with variables:

.loaderspan {

Height:calc (var (--n) * 1em)

}

.loaderspan:nth-child (1) {

-- nRO 1

}

.loaderspan:nth-child (2) {

-- nRO 2

}

.loaderspan:nth-child (3) {

-- nRO 3

}

.loaderspan:nth-child (4) {

-- nRO 4

}

.loaderspan:nth-child (5) {

-- nRO 5

}

Add animation to the step to convert the sorting direction:

.loaderspan {

Animation:sort5sinfinite

}

@ keyframessort {

0%, 40%, 100% {

Height:calc (var (--n) * 1em)

}

50% 90% {

Height:calc (5em-(var (--n)-1) * 1em)

}

}

The following animation of the ball, using a blindfold, so that the alternating movement of two small balls of the same color looks like a small ball in reciprocating motion.

Draw 2 balls with pseudo elements:

.loader:: before

.loader:: after {

Content:''

Position:absolute

Width:1em

Height:1em

Background-color:white

Border-radius:50%

Bottom:1em

}

.loader:: before {

Left:0

}

.loader:: after {

Left:6em

}

Add animation that makes the ball move up:

.loader:: before

.loader:: after {

Animation:climbing5sinfinite

Visibility:hidden

}

.loader:: after {

Animation-delay:2.5s

}

@ keyframesclimbing {

0% {

Bottom:1em

Visibility:visible

}

10% {

Bottom:2em

}

20% {

Bottom:3em

}

30% {

Bottom:4em

}

40% {

Bottom:5em

}

50% {

Bottom:1em

}

50% par 100% {

Visibility:hidden

}

}

Move upward while moving to both sides to form an animation effect of going up the steps:

.loader:: before {

-- direction:1

}

.loader:: after {

-- direction:-1

}

@ keyframesclimbing {

0% {

Bottom:1em

Left:calc (3em-2*1.5em*var (--direction))

Visibility:visible

}

10% {

Bottom:2em

Left:calc (3em-1*1.5em*var (--direction))

}

20% {

Bottom:3em

Left:calc (3em-0*1.5em*var (--direction))

}

30% {

Bottom:4em

Left:calc (3em+1*1.5em*var (--direction))

}

40% {

Bottom:5em

Left:calc (3em+2*1.5em*var (--direction))

}

50% {

Bottom:1em

Left:calc (3em+2*1.5em*var (--direction))

}

50% par 100% {

Visibility:hidden

}

}

Finally, add an anthropomorphic effect to the action of going up the steps:

@ keyframesclimbing {

0% {

Bottom:1em

Left:calc (3em-2*1.5em*var (--direction))

Visibility:visible

}

7% {

Bottom:calc (2em+0.3em)

}

10% {

Bottom:2em

Left:calc (3em-1*1.5em*var (--direction))

}

17% {

Bottom:calc (3em+0.3em)

}

20% {

Bottom:3em

Left:calc (3em-0*1.5em*var (--direction))

}

27% {

Bottom:calc (4em+0.3em)

}

30% {

Bottom:4em

Left:calc (3em+1*1.5em*var (--direction))

}

37% {

Bottom:calc (5em+0.3em)

}

40% {

Bottom:5em

Left:calc (3em+2*1.5em*var (--direction))

}

50% {

Bottom:1em

Left:calc (3em+2*1.5em*var (--direction))

}

50% par 100% {

Visibility:hidden

}

}

About "how to use pure CSS to achieve the animation effect of small ball jumping step" this article is shared here, I hope the above content can be of some help to you, so that you can learn more knowledge, if you think the article is good, please share it out for more people to see.

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.