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

Editor to share with you how to use pure CSS to achieve the bounce in the container of the ball, I believe that most people do not know much, so share this article for your reference, I hope you will learn a lot after reading this article, let's learn about it!

Code interpretation

Define dom with only one element:

Centered display:

Body {

Margin:0

Height:100vh

Display:flex

Align-items:center

Justify-content:center

Background-color:black

}

Define the size of the container:

.loader {

Width:10em

Height:3em

Border:0.3emsolidsilver

Border-radius:3em

Font-size:20px

}

Paint the left and right sides of the container with different colors:

.loader {

Border-left-color:hotpink

Border-right-color:dodgerblue

}

Draw a small ball in the container:

.loader {

Position:relative

}

.loader:: before {

Content:''

Position:absolute

Top:0

Left:0

Width:3em

Height:3em

Border-radius:50%

Background-color:dodgerblue

}

Let the ball move back and forth in the container:

.loader:: before {

Animation:shift3slinearinfinite

}

@ keyframesshift {

50% {

Left:7em

}

}

Then let the ball change color when it hits both ends:

.loader:: before {

Animation:

Shift3slinearinfinite

Change-color3slinearinfinite

}

@ keyframeschange-color {

0% 55% {

Background-color:dodgerblue

}

5% 50% {

Background-color:hotpink

}

}

Finally, keep the container spinning:

.loader {

Animation:spin3slinearinfinite

}

@ keyframesspin {

To {

Transform:rotate (360deg)

}

}

The above is all the content of the article "how to use pure CSS to achieve a bouncing ball in a container". 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.