About
Explore
Events & Classes
Support Us
Join
Sign In
Coding with Rumaysa
View Project Page
Run
Fullscreen
[UPDATED & REVISED] 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(40deg,purple,skyblue); width: 100px; height: 100px; border-radius: 50%; display: inline-block; margin-right: 135px; animation: bounce 3s infinite; } .ball:nth-of-type(1) { margin-left: 10px; } @keyframes bounce { 0% { margin-top: 0; } 50% { margin-top: 690px; width: 100px; height: 40px; } 100% { margin-top: 0; } }
About
Explore
Events & Classes
Support Us
Join
Sign In
