A CodePen by Nathan St. Pierre. Dribbble Request - Everyone's probably already done this, but it's my first attempt to do a lot with some of these CSS properties, so shoot me an invite if you like it!

index.html

<header>
  <h1>Anyone have an invite?</h1>
  Nathan St. Pierre (<a href="http://dribbble.com/NateDSaint">natedsaint</a>) 
</header>
<section>
  <article>
    <p class="line one">
    </p>
    <p class="line two">
    </p>
    <p class="line three">
    </p>
  </article>
  <footer class="shadow">
  </footer>
</section>
<footer>
</footer>

style.css

/* Thanks for checking out my code! */

/* I'm sure this has been done to death, but not by me! This is my first attempt at this, completely from scratch */

/* Import for google web fonts */

@import url(http://fonts.googleapis.com/css?family=Cardo);

/* General tags in markup order */

body {
  overflow:hidden;
  margin:0px;
  padding:0px;
  background:#bbb;
  font-family:"Cardo";
  color:#eee;
}
body a {
  color:#ffadcb;
  text-shadow:1px 1px 10px #222;
  cursor:pointer;
  transition:color .4s, text-shadow .4s;
  text-decoration:none;
}
header {
  width:100%;
  position:fixed;
  bottom:0px;
  text-align:center;
  z-index:50;
  text-shadow:1px 1px 10px rgba(0,0,0,.6);
  font-size:40px;
  height:auto;
}
header h1 {
  margin:0px;
  padding:0px;
}
section {
  margin:0px auto;
  display:block;
  width:120px;
  display:block;
  position:relative;
  z-index:40;
}

article {
  width:90px;
  height:90px;
  background:#f672a2;
  background-image:linear-gradient( rgba(255,255,255,0),rgba(255,255,255,.2));
  border-radius:50%;
  border:solid 5px #c5376d;
  position:absolute;
  animation:bounce .8s infinite alternate ease-in-out;
  z-index:10;
  overflow:hidden;
  box-shadow:inset 0px -10px 40px #c5376d;
}

footer {
  box-shadow:0px 0px 45px #333;
 background:url('http://www.nathanstpierre.com/images/court.jpg') repeat;
  width:100%;
  height:160%;
  position:absolute;
  bottom:0px;
  z-index:-1;
  transform: perspective( 600px ) rotateX( 40deg );
  pointer-events:none;
}

/* specific classes */

.line {
  border:inherit;
  z-index:5;
  position:absolute;
  margin:0px;
  padding:0px;
}
.line.one { 
  height: 300px;
  width: 200px;
  left: -130px;
  top: 0px;
  border-radius:40%;
  box-shadow:1px 1px 0px rgba(255,255,255,.6);
}
.line.two,.line.three {
  box-shadow:1px 1px 0px rgba(255,255,255,.3);
  width:400px;
  height:300px;
  top:0px;
  left:0px;
  border-radius:50%;
}

.line.three {
  top:-240px;
  left:-300px;
}

.line.two {
  box-shadow:inset 1px 1px 0px rgba(255,255,255,.3);
}

.shadow {
  background:rgba(0,0,0,.8);
  width:40px;
  height:10px;
  border-radius:10px;
  top:190px;
  left:28px;
  box-shadow:0px 0px 20px #000; 
  animation:grow .8s infinite alternate ease-in-out;
  position:absolute;
  z-index:5;
}

/* Pseudo-classes/elements */

article::before {
  content:'';
  position:absolute;
  top:4px;
  left:14px;
  width:60px;
  height:40px;
  border-radius:50%;
  background-image:linear-gradient( rgba(255,255,255,.7),rgba(255,255,255,0));
  z-index:10;
}

body a:hover {
  transition:color .1s,text-shadow .1s;
  color:#ff3e85;
  text-shadow:0px 0px 2px #333;
}

/* Animation keyframes */
@keyframes grow {
  0% {
    transform:scale(1,1);
    background:rgba(0,0,0,.8);
  }
  100% {
    transform:scale(1.6,1.2);
    background:rgba(0,0,0,1);
  }
}
@keyframes bounce {
  0% {
    transform:scaleY(1);
    top:0px;
  }
  100% {
    transform:scaleY(.825);
    top:100px;
  }
}