About
Explore
Events & Classes
Support Us
Join
Sign In
Coding with Rumaysa
View Project Page
Run
Fullscreen
Bouncing Balls
HTML
CSS
JS
<!DOCTYPE HTML> <html> <head> <title>Page Title</title> <meta charset="utf-8"> <meta name="author" content="Coding with Rumaysa"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <div class="ball"></div> <div class="ball"></div> <div class="ball"></div> </body> </html>
.ball { background: linear-gradient(to bottom,purple,skyblue); width: 100px; height: 100px; border-radius: 50%; display: inline-block; margin-right: 135px; animation: bounce 1s infinite; } .ball:nth-of-type(1) { margin-left: 10px; } @keyframes bounce { from { margin-top: 0; } to { margin-top: 600px; } }