Playable Pong *

dabblet.css

/**
 * Playable Pong *
 */



/* line 9, ../sass/style.scss */
body {
  overflow: hidden;
  font-family: 'Arial Narrow', sans-serif;
  background: #000;
  margin: 0;
  padding: 0;
  color: #0f0;
  text-align: center;
  text-transform: uppercase;
  cursor: url(http://sitepointstatic.com/examples/css3pong/img/bat.gif), text; 
}

/* line 20, ../sass/style.scss */
body:before {
  /*scan line effect */
  content: "";
  position: absolute;
  margin: 0;
  padding: 0;
  background-image: linear-gradient(top, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 100%);
  background-size: 100% 4px;
  width: 100%;
  height: 100%;
  z-index: 999;
  pointer-events: none;
  top: 0;
  left: 0;
}

/* line 35, ../sass/style.scss */
body * {
  text-shadow: 0px 0px 3px rgba(90, 255, 90, 0.9), 0px 0px 3px rgba(90, 255, 90, 0.9), 0px 0px 7px rgba(90, 255, 90, 0.9);
}

/* line 38, ../sass/style.scss */
h1 {
  text-align: center;
  font: 400 60px 'Impact';
  letter-spacing:5px;
  font-family: 'Helvetica Neue', Helvetica, sans-serif;
  line-height: 1em;
  color: #0afa0a;
  font-weight:bold;
  font-size: 70px;
  text-shadow:0px 0px 0 rgb(-53,187,-53),0px 1px 0 rgb(-71,169,-71),0px 2px 0 rgb(-88,152,-88),0px 3px 0 rgb(-106,134,-106),0px 4px 0 rgb(-123,117,-123), 0px 5px 0 rgb(-140,100,-140),0px 6px 5px rgba(0,0,0,0.25),0px 6px 1px rgba(0,0,0,0.5),0px 0px 5px rgba(0,0,0,.2);}
	}

/* line 42, ../sass/style.scss */
p {
  text-align: center;
  font: 400 24px'';
}

/* line 46, ../sass/style.scss */
footer p {
  font-size: 12px;
}

/* line 48, ../sass/style.scss */
#court {
  margin: 29px auto;
  width: 600px;
  height: 301px;
  position: relative;
  border: 4px dotted #3f3;
  cursor: url(http://sitepointstatic.com/examples/css3pong/img/bat.gif), text;
  text-shadow: 0px 0px 7px rgba(90, 255, 90, 0.9), 0px 0px 7px rgba(90, 255, 90, 0.9);
}

/* line 59, ../sass/style.scss */
#court:before {
  /* net */
  left: 50%;
  content: "";
  width: 10px;
  height: 300px;
  position: absolute;
  border-left: 4px dashed #3f3;
}

/* ------ switches ------- */
/* line 71, ../sass/style.scss */
input {
  /* hide all */
  width: 0px;
  height: 0px;
  overflow: hidden;
  /*outline:1px dashed #f00;*/
  appearance: none;
  position: absolute;
  top: -100px;
  left: -10px;
  cursor: url(http://sitepointstatic.com/examples/css3pong/img/bat.gif), text;
}

/* line 83, ../sass/style.scss */
input:checked + input {
  /* display next targetzone */
  left: -20px;
  top: 36%;
  width: 70px;
  height: 50px;
  z-index: 99;
}


input:hover:checked {
  /* targetzone: keep in place while hover is active 
  background:rgba(0,0,200,.3);*/

  left: -20px;
  top: 36%;
  width: 70px;
  height: 50px;
  animation: updown 2.9s infinite linear, targetzone 2.3s infinite linear;
  z-index: 99;
    /*outline:1px dashed #f00;*/
}

input:hover:checked + input {
  /* keep the NEXT targetzone hidden till previous hover state ends */
  left: 0px;
  top: -100px;
  width: 50px;
  height: 50px;
}

/* ------ reset score button ------- */
input#rd0 {
  /* reset scores*/
  left: 550px;
  appearance: normal;
  width: 50px;
  height: 50px;
}
input#rd0:hover:checked {
  animation: none;
}
input#rd0:before {
  /* reset scores*/
  content: "Reset";
  color: white;
  font-size: 12px;
  height: 25px;
}

/* ------ ball components ------- */
#ball {
  position: absolute;
  width: 20px;
  height: 20px;
  display: block;
  background: #3f3;
  border-radius: 50%;
  box-shadow: 0px 0px 7px rgba(90, 255, 90, 0.9), 0px 0px 7px rgba(90, 255, 90, 0.9);
  animation: fadein 2s 1 linear;
  transform: translate3d(10px, 0, 0);
}

/* line 145, ../sass/style.scss */
#horizontal {
  position: absolute;
  width: 100%;
  height: 20px;
  top: 45%;
}

/* line 152, ../sass/style.scss */
#player2 {
  /* player 2 */
  background: #3f3;
  position: absolute;
  width: 7px;
  height: 44px;
  right: 4px;
  margin-top: -12px;
}

/* ------ ball animation ------- */

input:checked + input:hover ~ #horizontal #ball {
  /* ready: pulse ball  */
  animation: pulse 0.5s infinite;
}

input:hover:checked ~ #horizontal {
  animation: leftright 2.9s infinite linear;
}

 input:hover:checked ~ #horizontal #ball {
  animation: updown 2.3s infinite linear;
  background:red;
}
input ~ #horizontal #ball {
  animation: none;
  background:yellow;
}

input:hover:checked ~ #horizontal #player2 {
  animation: twitchy 2.3s infinite linear;
}

/* ------ The Scoring System------- */
ul {
  position: absolute;
  right: 30%;
  list-style: none;
  height: 40px;
  width: 80px;
  overflow: hidden;
  font-size: 40px;
  padding: 0;
  margin: 0;
  top: 20px;
  text-align: center;
}

ul li {
  position: absolute;
  top: -50px;
  width: 80px;
  text-align: center;
}
/* position score lists */
ul#pl1 {left: 30%;}
ul#pl2 {right: 30%;}

ul#pl1 li:nth-of-type(1) {
  top: 0px;
}


input:nth-of-type(1):checked ~ ul#pl2 li:nth-of-type(1),
input:nth-of-type(2):checked ~ ul#pl2 li:nth-of-type(2),
input:nth-of-type(3):checked ~ ul#pl2 li:nth-of-type(3),
input:nth-of-type(4):checked ~ ul#pl2 li:nth-of-type(4),
input:nth-of-type(5):checked ~ ul#pl2 li:nth-of-type(5),
input:nth-of-type(6):checked ~ ul#pl2 li:nth-of-type(6),
input:nth-of-type(2):hover:checked ~ ul#pl2 li:nth-of-type(1),
input:nth-of-type(3):hover:checked ~ ul#pl2 li:nth-of-type(2),
input:nth-of-type(4):hover:checked ~ ul#pl2 li:nth-of-type(3),
input:nth-of-type(5):hover:checked ~ ul#pl2 li:nth-of-type(4),
input:nth-of-type(6):hover:checked ~ ul#pl2 li:nth-of-type(5) {
  top: 0px;
  /* show the score (LI) associated with each input */
  transition: top 3s;
}

/* line 225, ../sass/style.scss */
input:nth-of-type(1):hover:checked ~ ul#pl2 li:nth-of-type(1),
input:nth-of-type(2):hover:checked ~ ul#pl2 li:nth-of-type(2),
input:nth-of-type(3):hover:checked ~ ul#pl2 li:nth-of-type(3),
input:nth-of-type(4):hover:checked ~ ul#pl2 li:nth-of-type(4),
input:nth-of-type(5):hover:checked ~ ul#pl2 li:nth-of-type(5),
input:nth-of-type(6):hover:checked ~ ul#pl2 li:nth-of-type(6) {
  top: -50px;
  /* delay the next score offscreen WHILE the hover is active */
}

/* ------ animations ------- */
@keyframes updown {
	0%,50%,100% { /*  the middle  */
    transform: translate3d(0, 0, 0);
  }
  25% { /*  the top  */
	transform: translate3d(0, 142px, 0);
  } 
  75% { /* the bottom */
    transform: translate3d(0, -136px, 0);
  }
}

@keyframes leftright {
  0%,100% {/* left side */
    transform: translate3d(10px, 0, 0);
  }  
  50% {/* right side */
    transform: translate3d(570px, 0, 0);
  }
}

@keyframes targetzone {
  /* ball in general play */
  0%,94% {
    width: 1200px;
    height: 700px;
    margin: -110% 0 0 -50%;
  }

  /* ball about to pass player 1's baseline */
  94.1%,100% {
    width: 70px;
    height: 60px;
  }
}

@keyframes pulse {/* pulse ball -- 'READY!' */
0%,100% {
    opacity: .2;
  }
  90% {
    opacity: 1;
  }
}

@keyframes fadein { /* fades new ball in after each point */
  /* line 249, ../sass/style.scss */
  0% {
    height: 0;
  }
  90% {
    height: 0;
  }
  100% {
    height: 20px;
  }
}


@keyframes twitchy{ /* make players seem real */
    0%,
    100% {transform: translate3d(0,0,0)}
    25%  {transform: translate3d(0,-25px,0)}
    30%  {transform: translate3d(0,-70px,0)}
    35%  {transform: translate3d(0,-25px,0)}
    40%  {transform: translate3d(0,-50px,0)}
    50%  {transform: translate3d(0,0px,0)}
    75%  {transform: translate3d(0,-30px,0)}
    75%  {transform: translate3d(0,60px,0)}

}

dabblet.html

<header>
	<h1 class="Three-Dee">CSS3 PONG!</h1>
</header>
  <div role="main">
      <div id="court">
              <input id="rd0" type="radio" name="set" checked>
              <input id="rd1" type="radio" name="set">        
              <input id="rd2" type="radio" name="set">        
              <input id="rd3" type="radio" name="set">        
              <input id="rd4" type="radio" name="set">        
              <input id="rd5" type="radio" name="set">      
	      <div id="horizontal">        
	      		<div id="ball"> </div>        
		      	<div id="player2"> </div>      
	      </div>    
	      <ul id="pl1"><!--player 1 score (tip: it never changes) -->       
		      <li>0</li>       
		      <li>1</li>         
		      <li>2</li>       
		      <li>3</li>      
		      <li>4</li>      
		      <li>WIN!</li>     
	      </ul>    
	      <ul id="pl2"><!-- player 2 score -->       
		      <li>0</li>       
		      <li>1</li>         
		      <li>2</li>       
		      <li>3</li>      
		      <li>4</li>      
		      <li>WIN!</li>     
	      </ul>    
      	</div>    
      
      <p>Click ball to serve</p>  
      </div>  
      <footer>      
      <p>DesignFestival.com 2012 -  Alex Walker</p>  
      </footer>

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}