CodePen Embed - ThWack-a-Vole

<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width">
  <meta name="format-detection" content="telephone=no">
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <title>ThWack-a-Vole</title>
<style>
.ExternalClass * {
  line-height: 100%;
} 

table {
  border-collapse: collapse;
  table-layout: fixed;
} 
  
@media screen and (max-width: 600px) {	
  body{
    margin:0px;
  }
	  table[class="outer"]{
		    width:100%;!important;
	  }
  [class="title"]{
    font-size:33px;!important;
    font-size:9vw;!important;
  }
  [class="left-col"]{  
    width:100%;
  }
  [class="right-col"]{  
    width:100%;
  }
}  
  
</style>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#11aa77" style="background-color:#11aa77;" >
 <tr>
  <td>
	<table align="center" width="600" class="outer" border="0" cellspacing="0" cellpadding="0">   
    <tr>
      <td>
        <a href="http://emailcodegeek.com" style="width: 3em; height: 45px; border-radius: 50%; font-family: 'Courier New', Courier, monospace; color: #eee; font-size: 14px; padding: 15px; text-align: center; line-height: 100%; border: 1px solid #eee; margin:5px auto; -webkit-text-size-adjust: none; display:block; text-decoration:none;">email<br>code<br>geek</a>
      </td>
    </tr>
  </table>
  </td>
 </tr>
</table>  
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#eeeeee" style="background-color:#eeeeee;" >
 <tr>
  <td>
	<table align="center" width="600" class="outer" border="0" cellspacing="0" cellpadding="0">   
    <tr>
      <td style="text-align:center; font-size:60px; font-family:'Courier New', Courier, monospace; color:#000000; padding:10px 0; text-shadow:-2px 2px 2px #888;">
        <span class="title">ThWack-a-Vole</span>
      </td>
    </tr>
  </table>
  </td>
 </tr>
</table>
  
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#92c3b3" style="background-color:#92c3b3;" >
 <tr>
  <td>
	<table align="center" width="600" class="outer" border="0" cellspacing="0" cellpadding="0" bgcolor="#eeeeee"style="background-color:#eeeeee;">   
    <tr>
      <td height="15" bgcolor="#92c3b3" style="border-bottom:15px solid #eeeeee; background-color:#92c3b3;"></td>
    </tr>
    <tr>
      <td>
        <table align="left" width="320" class="left-col" border="0" cellspacing="0" cellpadding="0">         
          <tr>
            <td>
        
  
	<!-- 	INPUT FOR BUTTON SELECT -->
  <input type="radio" name="next" id="slide0" checked>
  <input type="radio" name="next" id="slide1">
  <input type="radio" name="next" id="slide2">
  <input type="radio" name="next" id="slide3">
  <input type="radio" name="next" id="slide4">
  <input type="radio" name="next" id="slide5">



<div class="brain">
  
  <div class="game">
    <label for="slide0" class="int manage_zero mole"></label>
    <label for="slide1" class="int manage_zero vole"></label>
    <label for="slide0" class="int manage_one mole"></label>
    <label for="slide2" class="int manage_one vole"></label>
    <label for="slide1" class="int manage_two mole"></label>
    <label for="slide3" class="int manage_two vole"></label>
    <label for="slide2" class="int manage_tre mole"></label>
    <label for="slide4" class="int manage_tre vole"></label>
    <label for="slide3" class="int manage_for mole"></label>
    <label for="slide5" class="int manage_for vole"></label>
  </div>

  <!-- COUNTER -->
    <span class="count-txt">Score:</span>
    <div class="count">
			<div class="score">
          <div class="zeroP">0</div>
          <div class="oneP">1</div>
          <div class="twoP">2</div>
          <div class="threeP">3</div>
          <div class="fourP">4</div>
			</div>
		</div>
  <div class="winner">
    WINNER!!!
    <br/><br/>
    <a href="http://goodemailcode.com" style="font-size:25px; font-family: arial;">Now visit my site</a>
    <br><br>
    <label for="slide0">play again</label>
  </div>
  
</div>
            </td>
          </tr>
        </table>
        <table align="left" width="250" class="right-col" border="0" cellspacing="0" cellpadding="5">         
          <tr>
            <td style="font-size:20px; font-family:arial;">
              <strong style="font-size:40px;">How to play</strong>
                <br/><br/>
              <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/51773/Vole.png" width="60" style="float:left;">
              ThWack-a-Vole and score a point.
                <br/><br/><br/>
              <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/51773/mole.png" width="60" style="float:left;">
              Wack-a-Mole and you'll lose a point for copyright infringement.
            </td>
          </tr>
        </table>
      </td>
    </tr>
    <tr>
      <td height="15" bgcolor="#92c3b3" style="border-top:15px solid #eeeeee; background-color:#92c3b3;"></td>
    </tr>    
  </table>
  </td>
 </tr>
</table>

<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#333333" style="background-color:#333333;">
 <tr>
  <td>
	<table align="center" width="600" class="outer" border="0" cellspacing="0" cellpadding="0">   
    <tr>
      <td>
        <div style="width: 3em; height: 45px; border-radius: 50%; font-family: 'Courier New', Courier, monospace; color: #eee; font-size: 15px; padding: 15px; text-align: center; line-height: 100%; border: 1px solid #eee; margin:5px auto; -webkit-text-size-adjust: none;">email<br>code<br>geek</div>
      </td>
    </tr>
  </table>
  </td>
 </tr>
</table>  
</body>
</html>

body{
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
}
input{
	display: none;
}

.brain{
  text-align: center;
  background:#444;
  width:300px;
  margin:0 auto;
}

.game{
  height:300px;
  width:300px;
  position:relative;
  background:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/51773/dirt.jpg') center / cover #333333;
  cursor: url(http://wiki.mabinogiworld.com/images/6/63/Toy_Hammer.png), auto;
}

.game::before{
  background:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/51773/grass.png') center / cover;

  width:300px;
  height:300px;
  display:block;
  content:'';
  z-index:10;
  position:relative;
  pointer-events:none;
}

/*COUNTER*/
.count-txt{
  font-family:impact, arial;
  font-size:35px;
  line-height:50px;
  color:#eeeeee;
  padding-left:75px;
  float:left;
  text-shadow:1px 1px #000;
}
.count{
  display:block;
  width:50px;
  height: 50px;
  border: solid 3px #555;
  overflow: hidden;
  background:#fff;
  -webkit-box-shadow: inset 5px 0px 5px 0px rgba(0, 0, 0, 0.4), inset -5px 0px 5px 0px rgba(0, 0, 0, 0.4);
  -moz-box-shadow:    inset 5px 0px 5px 0px rgba(0, 0, 0, 0.4), inset -5px 0px 5px 0px rgba(0, 0, 0, 0.4);
  box-shadow:         inset 5px 0px 5px 0px rgba(0, 0, 0, 0.4), inset -5px 0px 5px 0px rgba(0, 0, 0, 0.4);
}
.score div{
	width: 50px;
  height:50px;
  font-size:50px;
  font-family:arial;
  line-height:50px;
	-webkit-background-size: contain;
	-moz-background-size: contain;
	background-size: contain;
	display: inline-block;
	float: left;
	margin: 0;
	padding: 0;
}
.score{
	display: block;
	width: 250px;
	height: 50px;
	-webkit-transition: all 300ms ease-in-out;
   	-moz-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}

.winner{
  display:none;
  background:#fff;
  color:red;
  padding:10px;
  font-size:40px;
}

/*Plus minus*/
.vole, .mole{
  width: 60px;
  height: 60px;
  position: absolute;
  z-index:5;
}
.mole{
	background:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/51773/mole.png') center / contain no-repeat;
  -webkit-animation: mole 10s infinite alternate; 
  animation: mole 10s infinite alternate; 
}

.vole{
  background:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/51773/Vole.png') center / contain no-repeat;
  -webkit-animation: vole 10s infinite alternate; 
  animation: vole 10s infinite alternate;   
}
.vole:hover, .mole:hover{
  cursor: url(http://wiki.mabinogiworld.com/images/6/63/Toy_Hammer.png), auto;
}
.int{
	display: none;
}

/*INPUT MANAGE&PAGINATION CHECKED*/

#slide0:checked ~ .brain .manage_zero{display: inline-block;}

#slide1:checked ~ .brain .count .score{ margin-left:-50px;}
#slide1:checked ~ .brain .manage_one{display: inline-block;}
#slide1:checked ~ .brain .count .but .select1 > div{display: block;}

#slide2:checked ~ .brain .count .score{ margin-left:-100px;}
#slide2:checked ~ .brain .manage_two{display: inline-block;}
#slide2:checked ~ .brain .count .but .select2 > div{display: block;}

#slide3:checked ~ .brain .count .score{ margin-left:-150px;}
#slide3:checked ~ .brain .manage_tre{display: inline-block;}
#slide3:checked ~ .brain .count .but .select3 > div{display: block;}

#slide4:checked ~ .brain .count .score{ margin-left:-200px;}
#slide4:checked ~ .brain .manage_for{display: inline-block;}
#slide4:checked ~ .brain .count .but .select4 > div{display: block;}

#slide5:checked ~ .brain .game { display:none;}
#slide5:checked ~ .brain .count { display:none;}
#slide5:checked ~ .brain .count-txt { display:none;}
#slide5:checked ~ .brain .winner{display: block; height:300px;}

/* Speed up animation */
#slide1:checked ~ .brain .mole{
    -webkit-animation: vole 9s infinite alternate; 
  animation: vole 9s infinite alternate; 
}
#slide2:checked ~ .brain .mole{
    -webkit-animation: mole 8s infinite alternate; 
  animation: mole 8s infinite alternate; 
}
#slide3:checked ~ .brain .mole{
    -webkit-animation: vole 7s infinite alternate; 
  animation: vole 7s infinite alternate; 
}
#slide4:checked ~ .brain .mole{
    -webkit-animation: mole 5s infinite alternate; 
  animation: mole 5s infinite alternate; 
}
#slide1:checked ~ .brain .vole{
    -webkit-animation: mole 9s infinite alternate; 
  animation: mole 9s infinite alternate; 
}
#slide2:checked ~ .brain .vole{
    -webkit-animation: vole 8s infinite alternate; 
  animation: vole 8s infinite alternate; 
}
#slide3:checked ~ .brain .vole{
    -webkit-animation: mole 7s infinite alternate; 
  animation: mole 7s infinite alternate; 
}
#slide4:checked ~ .brain .vole{
    -webkit-animation: vole 5s infinite alternate; 
  animation: vole 5s infinite alternate; 
}

@-webkit-keyframes mole{
  0% {bottom: 210px; left: 125px;}
  10% {bottom: 115px; left: 215px;}
  14% {bottom: 115px; left: 215px;}
  20% {bottom: 20px; left: 35px;}
  24% {bottom: 20px; left: 35px;}
  30% {left:240px; bottom:60px;}
  34% {left:240px; bottom:60px;}  
  40% {bottom: 210px; left: 35px;}
  44% {bottom: 210px; left: 35px;}
  50% {bottom: 115px; left: 125px;}
  54% {bottom: 115px; left: 125px;}
  60% {bottom: 210px; left: 215px;}
  64% {bottom: 210px; left: 215px;}  
  70% {left:90px; bottom:160px;}
  74% {left:90px; bottom:160px;}
  80% {bottom: 20px; left: 215px;}
  84% {bottom: 20px; left: 215px;}
  90% {bottom: 20px; left: 125px;}
  94% {bottom: 20px; left: 125px;}
  100% {bottom: 20px; left: 35px;}
}

@-webkit-keyframes vole{
  0% {bottom: 115px; left: 125px;}
  10% {left:80px; bottom:60px;}
  14% {left:80px; bottom:60px;}
  20% {bottom: 210px; left: 215px;}
  24% {bottom: 210px; left: 215px;}
  30% {bottom: 115px; left: 125px;}
  34% {bottom: 115px; left: 125px;}
  40% {left:90px; bottom:160px;}
  44% {left:90px; bottom:160px;}
  50% {bottom: 20px; left: 35px;}
  54% {bottom: 20px; left: 35px;}
  60% {bottom: 115px; left: 215px;}
  64% {bottom: 115px; left: 215px;}
  70% {bottom: 210px; left: 35px;}
  74% {bottom: 210px; left: 35px;}
  80% {bottom: 115px; left: 125px;}
  84% {bottom: 115px; left: 125px;}
  90% {bottom: 115px; left: 35px;}
  94% {bottom: 115px; left: 35px;}
  100% {bottom: 210px; left: 35px;}  
}

@keyframes mole{
  0% {bottom: 210px; left: 125px;}
  10% {bottom: 115px; left: 215px;}
  14% {bottom: 115px; left: 215px;}
  20% {bottom: 20px; left: 35px;}
  24% {bottom: 20px; left: 35px;}
  30% {left:240px; bottom:60px;}
  34% {left:240px; bottom:60px;}  
  40% {bottom: 210px; left: 35px;}
  44% {bottom: 210px; left: 35px;}
  50% {bottom: 115px; left: 125px;}
  54% {bottom: 115px; left: 125px;}
  60% {bottom: 210px; left: 215px;}
  64% {bottom: 210px; left: 215px;}  
  70% {left:90px; bottom:160px;}
  74% {left:90px; bottom:160px;}
  80% {bottom: 20px; left: 215px;}
  84% {bottom: 20px; left: 215px;}
  90% {bottom: 20px; left: 125px;}
  94% {bottom: 20px; left: 125px;}
  100% {bottom: 20px; left: 35px;}
}

@keyframes vole{
  0% {bottom: 115px; left: 125px;}
  10% {left:80px; bottom:60px;}
  14% {left:80px; bottom:60px;}
  20% {bottom: 210px; left: 215px;}
  24% {bottom: 210px; left: 215px;}
  30% {bottom: 115px; left: 125px;}
  34% {bottom: 115px; left: 125px;}
  40% {left:90px; bottom:160px;}
  44% {left:90px; bottom:160px;}
  50% {bottom: 20px; left: 35px;}
  54% {bottom: 20px; left: 35px;}
  60% {bottom: 115px; left: 215px;}
  64% {bottom: 115px; left: 215px;}
  70% {bottom: 210px; left: 35px;}
  74% {bottom: 210px; left: 35px;}
  80% {bottom: 115px; left: 125px;}
  84% {bottom: 115px; left: 125px;}
  90% {bottom: 115px; left: 35px;}
  94% {bottom: 115px; left: 35px;}
  100% {bottom: 210px; left: 35px;}   
}

This Pen is owned by Mark Robbins on CodePen.

See more by @M_J_Robbins on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.