How to use pure CSS to realize a bouncing ball in a container
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!
