purple_ghost

Even More Bouncing Balls | Inline Code

<!DOCTYPE HTML>
<html>
<head>
<title>Bouncy Balls</title>
<meta charset="utf-8">
<style>
body { 
align-items: center; 
justify-content: center; 
font-family: cursive;
overflow: hidden;
background-color: #246b20;
}
.ball { 
width: 200px;
height: 200px; 
border-radius: 50%; 
display: inline-block; 
margin-bottom: 10px;
margin-right: 5px; 
animation: bounce 2s infinite;
}
.ball1 { 
background: linear-gradient(to bottom,purple,skyblue); 
margin-left: 50px;
color: white; 
}
.ball2 { 
background: linear-gradient(to bottom,red,orange);
color: indigo;
}
.ball3 { 
background: linear-gradient(to top,pink,yellow); 
color: green;
}
span {
text-align: center;
margin-top: 90px;
display: block;
font-weight: bolder;
font-size: 20px;
}
@keyframes bounce { 
  from { margin-top: 0px; }
  to { margin-top: 600px; }
}
</style>
</head>
<body>
  <div class="ball ball1">
   <span>CODE</span>
  </div>
  <div class="ball ball2">
   <span>COLLABORATE</span>
  </div>
  <div class="ball ball3">
   <span>JUSTCODABORATE</span>
  </div>
</body>
</html>