<html>
  <head>
  </head>
  <body>
    <div id="top"></div>
    <div id="bottom"></div>
    <div id="ball"></div>
  </body>
</html>
#top
{
  position:absolute;
  top:0;
  left:0;
  height:50%;
  width:100%;
  background:blue;
}
#bottom
{
  position:absolute;
  top:50%;
  left:0;
  width:100%;
  height:50%;
  background:linear-gradient(gray,white);
}
#ball
{
  position:absolute;
  left:45%;
  width:100px;
  background-image:url(https://cdn.wccftech.com/wp-content/uploads/2016/08/Pokemon-GO-PokeBall.png);
  background-size:100% 100%;
  border-radius:100%;
  box-shadow:10px 30px 40px -10px;
  animation: ball 3s infinite;
}
@keyframes ball
{
  0%{height:100px;top:50%;box-shadow:0px 25px 5px -20px;}
  25%{box-shadow:0px 25px 40px -20px}
  50%{top:20%;height:100px;box-shadow:20px -10px 100px 0px;}
  75%{box-shadow:0px 25px 30px -20px}
  100%{height:100px;top:50%;transform:rotate(1080deg);box-shadow:0px 25px 5px -20px;}
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.