Dribbble Rebound- "Basketball"

Insipred by @neoberg Gradient over a background image and perspective

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Dribbble Rebound- "Basketball"</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
    <html>
<body>
 <div class="basketball">
 <div class="court">
  <span class="ball"></span><span class="shadow"></span>  
   <div class="lighting">
   <div class="stripe">
     <div class="circle">
     <div class="field">
     </div><!--field-->
     </div><!--circle-->
   </div> <!--stripe-->
     <div class="dropshadow"></div> 
   </div><!--court-->
 </div><!--basketball-->   
  <!--SCRIPTS-->
    
  <!--END SCRIPTS-->  
 </body>
</html>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  
</body>
</html>
/* Downloaded from https://www.codeseek.co/ */
/*COLOR Rules */
/**KULER BASE**/
.visible-phone {
  display: none !important;
}
.visible-tablet {
  display: none !important;
}
.hidden-desktop {
  display: none !important;
}
.visible-desktop {
  display: inherit !important;
}
@media (min-width: 768px) and (max-width: 979px) {
  .hidden-desktop {
    display: inherit !important;
  }
  .visible-desktop {
    display: none !important ;
  }
  .visible-tablet {
    display: inherit !important;
  }
  .hidden-tablet {
    display: none !important;
  }
}
@media (max-width: 767px) {
  .hidden-desktop {
    display: inherit !important;
  }
  .visible-desktop {
    display: none !important;
  }
  .visible-phone {
    display: inherit !important;
  }
  .hidden-phone {
    display: none !important;
  }
}
body {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: #373737;
}
/*Start code*/
.court {
  margin: 0 auto;
  height: 250px;
  width: 250px;
  -webkit-perspective: 350;
  -moz-perspective: 350;
  -ms-perspective: 350;
  perspective: 350;
  position: relative;
  z-index: 3;
  top: 100px;
}
/*
The court creates a viewport to add perspective
Because of rotation/perspective and z-indexing a fix for layering would simple be strictly using before and after.
 */
.field:after {
  content: " ";
  display: block;
  position: relative;
  height: 249px;
  width: 280px;
  background-image: url('http://artsmc.net/codepen/dribbble/basketball/textures/purty_wood_sml.png');
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  -webkit-transform: rotateX(70deg);
  -moz-transform: rotateX(70deg);
  -ms-transform: rotateX(70deg);
  -o-transform: rotateX(70deg);
  border-bottom: 10px solid white;
  border-top: 20px solid white;
}
.field:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -70px;
  top: 220px;
  height: 40px;
  width: 435px;
  background-image: url('http://artsmc.net/codepen/dribbble/basketball/textures/purty_wood_sml.png');
  -webkit-border-top-right-radius: 0px;
  -webkit-border-bottom-right-radius: 70px;
  -webkit-border-bottom-left-radius: 70px;
  -webkit-border-top-left-radius: 0px;
  -moz-border-radius-topright: 0px;
  -moz-border-radius-bottomright: 70px;
  -moz-border-radius-bottomleft: 70px;
  -moz-border-radius-topleft: 0px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 70px;
  border-bottom-left-radius: 70px;
  border-top-left-radius: 0px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}
/*lighting*/
.lighting {
  position: relative;
  z-index: 4;
}
.lighting:after {
  background-color: rgba(255, 255, 255, 0.7);
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.7)), to(rgba(0, 0, 0, 0.1)));
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.7), rgba(0, 0, 0, 0.1));
  background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.7), rgba(0, 0, 0, 0.1));
  background: -ms-linear-gradient(top, rgba(255, 255, 255, 0.7), rgba(0, 0, 0, 0.1));
  background: -o-linear-gradient(top, rgba(255, 255, 255, 0.7), rgba(0, 0, 0, 0.1));
  content: " ";
  display: block;
  position: absolute;
  top: 0px;
  height: 280px;
  width: 280px;
  -webkit-transform: rotateX(70deg);
  -moz-transform: rotateX(70deg);
  -ms-transform: rotateX(70deg);
  -o-transform: rotateX(70deg);
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}
.lighting:before {
  content: "";
  position: absolute;
  left: -70px;
  top: 220px;
  height: 40px;
  width: 435px;
  background-color: rgba(0, 0, 0, 0.3);
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.3)), to(rgba(0, 0, 0, 0.3)));
  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3));
  background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3));
  background: -ms-linear-gradient(top, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3));
  background: -o-linear-gradient(top, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3));
  -webkit-border-top-right-radius: 0px;
  -webkit-border-bottom-right-radius: 70px;
  -webkit-border-bottom-left-radius: 70px;
  -webkit-border-top-left-radius: 0px;
  -moz-border-radius-topright: 0px;
  -moz-border-radius-bottomright: 70px;
  -moz-border-radius-bottomleft: 70px;
  -moz-border-radius-topleft: 0px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 70px;
  border-bottom-left-radius: 70px;
  border-top-left-radius: 0px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}
.stripe:after {
  content: " ";
  position: absolute;
  top: 0px;
  left: 50%;
  height: 280px;
  width: 15px;
  -webkit-transform: rotateX(70deg);
  -moz-transform: rotateX(70deg);
  -ms-transform: rotateX(70deg);
  -o-transform: rotateX(70deg);
  background: white;
}
.stripe:before {
  content: "";
  position: absolute;
  left: 50%;
  top: 220px;
  height: 40px;
  width: 26px;
  background: #d5d5d5;
}
.circle:after {
  content: " ";
  border: 15px solid #fff;
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  border-radius: 100px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  position: absolute;
  top: 40%;
  left: 38%;
  height: 50px;
  width: 50px;
  -webkit-transform: rotateX(70deg);
  -moz-transform: rotateX(70deg);
  -ms-transform: rotateX(70deg);
  -o-transform: rotateX(70deg);
}
.dropshadow:after {
  content: "";
  position: absolute;
  z-index: -2;
  height: 50px;
  width: 400px;
  -webkit-border-radius: 600px;
  -moz-border-radius: 600px;
  border-radius: 600px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  bottom: 150px;
  left: -50px;
  -webkit-box-shadow: 0 150px 60px 1px rgba(0, 0, 0, 0.7);
  -moz-box-shadow: 0 150px 60px 1px rgba(0, 0, 0, 0.7);
  box-shadow: 0 150px 60px 1px rgba(0, 0, 0, 0.7);
}
.dropshadow:before {
  content: "";
  position: absolute;
  z-index: -2;
  height: 50px;
  width: 200px;
  -webkit-border-radius: 600px;
  -moz-border-radius: 600px;
  border-radius: 600px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  bottom: 170px;
  left: 15%;
  -webkit-box-shadow: 0 150px 70px 10px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 150px 70px 10px rgba(0, 0, 0, 0.5);
  box-shadow: 0 150px 70px 10px rgba(0, 0, 0, 0.5);
}
/*ball*/
.ball {
  -webkit-animation: bounce 4s 0 linear;
  -moz-animation: bounce 4s 0 linear;
  -ms-animation: bounce 4s 0 linear;
  position: absolute;
  top: 60%;
  right: 20%;
  z-index: 90;
  display: block;
  height: 26px;
  width: 26px;
  background-color: #d56d3a;
  background: -webkit-gradient(linear, left top, left bottom, from(#d56d3a), to(#a94919));
  background: -webkit-linear-gradient(top, #d56d3a, #a94919);
  background: -moz-linear-gradient(top, #d56d3a, #a94919);
  background: -ms-linear-gradient(top, #d56d3a, #a94919);
  background: -o-linear-gradient(top, #d56d3a, #a94919);
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  border-radius: 100px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}
.shadow {
  -webkit-animation: shadow 4s 0 linear;
  -moz-animation: shadow 4s 0 linear;
  -ms-animation: shadow 4s 0 linear;
  display: block;
  position: absolute;
  top: 65%;
  right: 20%;
  z-index: 89;
  height: 20px;
  width: 20px;
  background: rgba(0, 0, 0, 0.3);
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  border-radius: 100px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  -webkit-transform: rotateX(70deg);
  -moz-transform: rotateX(70deg);
  -ms-transform: rotateX(70deg);
  -o-transform: rotateX(70deg);
  -webkit-box-shadow: 0 10px 10px 6px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 10px 10px 6px rgba(0, 0, 0, 0.3);
  box-shadow: 0 10px 10px 6px rgba(0, 0, 0, 0.3);
}
@-webkit-keyframes bounce {
  0% {
    top: 10%;
  }
  10% {
    top: 60%;
  }
  20% {
    top: 20%;
  }
  30% {
    top: 60%;
  }
  40% {
    top: 30%;
  }
  50% {
    top: 60%;
  }
  60% {
    top: 40%;
  }
  70% {
    top: 60%;
  }
  80% {
    top: 50%;
  }
  90% {
    top: 60%;
  }
  100% {
    top: 60%;
  }
}
@-moz-keyframes bounce {
  0% {
    top: 10%;
  }
  10% {
    top: 60%;
  }
  20% {
    top: 20%;
  }
  30% {
    top: 60%;
  }
  40% {
    top: 30%;
  }
  50% {
    top: 60%;
  }
  60% {
    top: 40%;
  }
  70% {
    top: 60%;
  }
  80% {
    top: 50%;
  }
  90% {
    top: 60%;
  }
  100% {
    top: 60%;
  }
}
@-o-keyframes bounce {
  0% {
    top: 10%;
  }
  10% {
    top: 60%;
  }
  20% {
    top: 20%;
  }
  30% {
    top: 60%;
  }
  40% {
    top: 30%;
  }
  50% {
    top: 60%;
  }
  60% {
    top: 40%;
  }
  70% {
    top: 60%;
  }
  80% {
    top: 50%;
  }
  90% {
    top: 60%;
  }
  100% {
    top: 60%;
  }
}
@keyframes bounce {
  0% {
    top: 10%;
  }
  10% {
    top: 60%;
  }
  20% {
    top: 20%;
  }
  30% {
    top: 60%;
  }
  40% {
    top: 30%;
  }
  50% {
    top: 60%;
  }
  60% {
    top: 40%;
  }
  70% {
    top: 60%;
  }
  80% {
    top: 50%;
  }
  90% {
    top: 60%;
  }
  100% {
    top: 60%;
  }
}
@-webkit-keyframes shadow {
  0% {
    opacity: 0;
    top: 80%;
    height: 30px;
    width: 30px;
  }
  10% {
    opacity: 1;
    top: 65%;
    height: 20px;
    width: 20px;
  }
  20% {
    opacity: .1;
    top: 80%;
    height: 30px;
    width: 30px;
  }
  30% {
    opacity: 1;
    top: 65%;
    height: 20px;
    width: 20px;
  }
  40% {
    opacity: .3;
    top: 80%;
    height: 30px;
    width: 30px;
  }
  50% {
    opacity: 1;
    top: 65%;
    height: 20px;
    width: 20px;
  }
  60% {
    opacity: .4;
    top: 80%;
    height: 30px;
    width: 30px;
  }
  70% {
    opacity: 1;
    top: 65%;
    height: 20px;
    width: 20px;
  }
  80% {
    opacity: .9;
    top: 80%;
    height: 30px;
    width: 30px;
  }
  90% {
    opacity: 1;
    top: 65%;
    height: 20px;
    width: 20px;
  }
  100% {
    opacity: 1;
    top: 65%;
    height: 20px;
    width: 20px;
  }
}
@-moz-keyframes shadow {
  0% {
    top: 10%;
  }
}
@-o-keyframes shadow {
  0% {
    top: 10%;
  }
}
@keyframes shadow {
  0% {
    top: 10%;
  }
}
/* Downloaded from https://www.codeseek.co/ */

This awesome code ( Dribbble Rebound- "Basketball" ) is write by Mark Campbell, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © Mark Campbell