About
Explore
Events & Classes
Support Us
Join
Sign In
purple_ghost
View Project Page
Run
Fullscreen
More Bouncing Balls
HTML
CSS
JS
<!DOCTYPE HTML> <html> <head> <title>Page Title</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <div class="ball ball1"></div> <div class="ball ball2"></div> <div class="ball ball3"></div> <div class="ball ball4"></div> <div class="ball ball5"></div> <div class="ball ball6"></div> </body> </html>
body { align-items: center; justify-content: center; } .ball { width: 110px; height: 110px; border-radius: 50%; display: inline-block; margin-bottom: 10px; margin-right: 5px; animation: bounce 3s infinite; } .ball1 { background: linear-gradient(to bottom,purple,skyblue); margin-left: 10px; } .ball2 { background: linear-gradient(to top,red,orange); } .ball3 { background: linear-gradient(to left,pink,yellow); } .ball4 { background: linear-gradient(to right,green,black); } .ball5 { background: linear-gradient(to bottom,blue,gray); } .ball6 { background: linear-gradient(to top,cyan,silver); } @keyframes bounce { 0% { margin-top: 0px; } 100% { margin-top: 600px; } }
About
Explore
Events & Classes
Support Us
Join
Sign In
.png)