Whac a mole game using HTML and CSS Only

Share your love

Are you looking for a fun way to improve your HTML and CSS skills? Have you ever played the classic arcade game Whac-A-Mole and wondered how it works? Look no further! In this tutorial, we will show you how to create your very own Whac-A-Mole game using only HTML and CSS. You’ll learn how to use CSS animations, transitions, and keyframes to make the game interactive and engaging. So, put on your game designer hat and get ready to create a fun and exciting game that you can share with your friends and family!

Before we start here are some more games you might like to create using css only –

I would recommend you don’t just copy and paste the code, just look at the code and type by understanding it.

Demo

HTML Code 

Starter Template

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSS -->
    <link rel="stylesheet" href="style.css">

    <title>Whac a mole game using HTML and CSS Only - Coding Torque</title>
</head>

<body>
    <!-- Further code here -->
</body>

</html>

Paste the below code in your <body> tag.

<form class="demo-content">
  <input id="mole-title-toggle" class="toggle mole-title-toggle" type="checkbox" checked="checked" />
  <div class="mole-title">
    <p class="mole-title-chunks">
      <span class="mole-title-far-left">Wha</span>
      <span class="mole-title-center-left">c-</span>
      <span class="mole-title-center">A</span>
      <span class="mole-title-center-right">-M</span>
      <span class="mole-title-far-right">ole</span>
    </p>
    <label class="button mole-start-button" for="mole-title-toggle">Play</label>
  </div>
  <div class="mole-game">
    <input id="mole-hole-far-left-toggle" class="toggle mole-hole-toggle" type="checkbox" />
    <label class="mole-hole mole-hole-far-left" for="mole-hole-far-left-toggle"></label>
    <div class="mole-hole mole-hole-far-left"></div>
    <input id="mole-hole-center-left-toggle" class="toggle mole-hole-toggle" type="checkbox" />
    <label class="mole-hole mole-hole-center-left" for="mole-hole-center-left-toggle"></label>
    <div class="mole-hole mole-hole-center-left"></div>
    <input id="mole-hole-center-toggle" class="toggle mole-hole-toggle" type="checkbox" />
    <label class="mole-hole mole-hole-center" for="mole-hole-center-toggle"></label>
    <div class="mole-hole mole-hole-center"></div>
    <input id="mole-hole-center-right-toggle" class="toggle mole-hole-toggle" type="checkbox" />
    <label class="mole-hole mole-hole-center-right" for="mole-hole-center-right-toggle"></label>
    <div class="mole-hole mole-hole-center-right"></div>
    <input id="mole-hole-far-right-toggle" class="toggle mole-hole-toggle" type="checkbox" />
    <label class="mole-hole mole-hole-far-right" for="mole-hole-far-right-toggle"></label>
    <div class="mole-hole mole-hole-far-right"></div>
    <input id="mole-mole-0-toggle" class="toggle mole-mole-toggle" type="checkbox" />
    <label class="mole-mole mole-mole-0" for="mole-mole-0-toggle"></label>
    <input id="mole-mole-1-toggle" class="toggle mole-mole-toggle" type="checkbox" />
    <label class="mole-mole mole-mole-1" for="mole-mole-1-toggle"></label>
    <input id="mole-mole-2-toggle" class="toggle mole-mole-toggle" type="checkbox" />
    <label class="mole-mole mole-mole-2" for="mole-mole-2-toggle"></label>
    <input id="mole-mole-3-toggle" class="toggle mole-mole-toggle" type="checkbox" />
    <label class="mole-mole mole-mole-3" for="mole-mole-3-toggle"></label>
    <input id="mole-mole-4-toggle" class="toggle mole-mole-toggle" type="checkbox" />
    <label class="mole-mole mole-mole-4" for="mole-mole-4-toggle"></label>
    <p class="mole-score">current score</p>
    <label class="button button-small mole-help-button" for="mole-help-toggle">pause/help</label>
    <input id="mole-help-toggle" class="toggle mole-help-toggle" type="checkbox" />
    <div class="mole-modal mole-help-modal">
      <p>Five moles and five holes. Click on the moles to hit them as they pop out. Be careful though&mdash;if you hit a hole when a mole isn't there, you damage the hole!</p>
      <input class="button mole-restart-button" type="reset" value="Restart" />
      <label class="button" for="mole-help-toggle">Continue</label>
    </div>
    <div class="mole-modal mole-win-modal">
      <p>Congratulations, shepherd! You got all of them. Those pesky moles won't be hurting your precious flock anymore.</p>
      <input class="button mole-restart-button" type="reset" value="Restart" />
    </div>
    <div class="mole-modal mole-loss-modal">
      <p>Oh no, all the holes are damaged! How will we ever catch those pesky moles now? Let's try that again.</p>
      <input class="button mole-restart-button" type="reset" value="Restart" />
    </div>
  </div>
</form>

CSS Code 

Create a file style.css and paste the code below.

.mole-modal {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  padding: 0.5em 3em;
  background-color: rgba(0, 0, 0, 0.7);
  font-size: 0.9em;
}
.mole-modal p {
  margin: 0 0 0.5em 0;
}
.mole-title-chunks {
  position: relative;
  top: -8em;
  z-index: 1;
  margin: 0;
  padding: 0.3em 0;
  color: #546269;
  font-size: 1.5em;
  text-shadow:
      -1px -1px 0 #22282a,
      1px -1px 0 #22282a,
      -1px 1px 0 #22282a,
      1px 1px 0 #22282a;
  letter-spacing: 0.2em;
  word-spacing: -0.4em;
  transition: top 400ms cubic-bezier(0.36, 0, 0.66, -0.56);
}
.mole-title-toggle:checked + .mole-title .mole-title-chunks {
  top: 0;
  transition: none;
}
.mole-title-far-left, .mole-title-center-left {
  display: inline-block;
  transform-origin: bottom right;
}
.mole-title-center-right, .mole-title-far-right {
  display: inline-block;
  transform-origin: bottom left;
}
.mole-title-far-left {
  transform: rotate(-20deg) translate(0.2em, 0.1em);
}
.mole-title-center-left {
  transform: rotate(-10deg) translate(0.1em, -0.1em);
}
.mole-title-center-right {
  transform: rotate(10deg) translate(-0.2em, 0);
}
.mole-title-far-right {
  transform: rotate(20deg) translate(-0.3em, 0.3em);
}
.mole-start-button {
  position: relative;
  bottom: -8em;
  transition: bottom 400ms cubic-bezier(0.36, 0, 0.66, -0.56);
}
.mole-title-toggle:checked + .mole-title .mole-start-button {
  bottom: 0;
  transition: none;
}
.mole-game {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  opacity: 1;
  transition: opacity 400ms 400ms;
}
.mole-title-toggle:checked + .mole-title + .mole-game {
  top: -8em;
  opacity: 0;
  transition: none;
}
.mole-hole, .mole-mole {
  display: block;
  position: absolute;
  cursor: crosshair;
}
.mole-hole {
  width: 4.4em;
  height: 2.7em;
  border: 0.3em solid #30383b;
  border-bottom-width: 0;
  border-radius: 50%;
  background-color: #22282a;
}
.mole-hole + .mole-hole {
  display: none;
  z-index: 1;
  border-color: #444f55;
  background-color: #30383b;
  cursor: not-allowed;
}
.mole-hole-toggle:checked + .mole-hole {
  display: none;
}
.mole-hole-toggle:checked + .mole-hole + .mole-hole {
  display: block;
}
.mole-hole::before, .mole-hole::after, .mole-mole::before, .mole-mole::after,
.mole-mole:active::before, .mole-mole:active::after {
  content: '';
  display: block;
  position: absolute;
  border-radius: 0.5em;
  transform: rotate(-30deg);
}
.mole-hole::before, .mole-mole:active::before {
  top: -8em;
  left: 4.5em;
  width: 1em;
  height: 4em;
  background-color: #30383b;
  transform-origin: bottom right;
}
.mole-hole::after, .mole-mole:active::after {
  top: -8em;
  left: 3em;
  width: 4em;
  height: 2em;
  background-color: #444f55;
  transform-origin: 2.5em 5.5em;
}
.mole-hole:active::before, .mole-hole:active::after,
.mole-mole:active::before, .mole-mole:active::after {
  animation-name: hammer;
  animation-duration: 200ms;
}
.mole-hole:active::before, .mole-mole:active::before {
  top: -0.5em;
}
.mole-hole:active::after, .mole-mole:active::after {
  top: -2em;
}
.mole-hole + .mole-hole::before, .mole-hole + .mole-hole::after {
  display: block;
  left: -0.3em;
  width: 5.83em;
  height: 0.3em;
  background-color: #22282a;
}
.mole-hole + .mole-hole::before {
  top: -0.3em;
  transform: rotate(28deg);
  transform-origin: top left;
  animation-name: none;
}
.mole-hole + .mole-hole::after {
  top: auto;
  bottom: 0;
  transform: rotate(-28deg);
  transform-origin: bottom left;
  animation-name: none;
}
.mole-hole-far-left, .mole-hole-center, .mole-hole-far-right {
  top: 2.5em;
}
.mole-hole-center-left, .mole-hole-center-right {
  top: 1em;
}
.mole-hole-far-left {
  left: 5em;
}
.mole-hole-center-left {
  left: 11em;
}
.mole-hole-center {
  left: 17em;
}
.mole-hole-center-right {
  left: 23em;
}
.mole-hole-far-right {
  left: 29em;
}
.mole-mole:active {
  animation-play-state: paused;
}
.mole-mole {
  top: -8em;
  left: 0;
  width: 5em;
  height: 3em;
  animation-name: mole;
  animation-duration: 300s;
  animation-iteration-count: infinite;
  animation-timing-function: step-end;
}
.mole-mole.mole-mole-1 {
  animation-delay: -60s;
}
.mole-mole.mole-mole-2 {
  animation-delay: -120s;
}
.mole-mole.mole-mole-3 {
  animation-delay: -180s;
}
.mole-mole.mole-mole-4 {
  animation-delay: -240s;
}
.mole-mole-toggle:checked + .mole-mole {
  display: none;
}
.mole-mole::before, .mole-mole::after {
  transform: none;
}
.mole-mole::before {
  top: 0.25em;
  left: 1.25em;
  width: 2.5em;
  height: 2.5em;
  border-radius: 1em 1em 0.5em 0.5em;
  background-color: #30383b;
}
.mole-mole::after {
  content: '..';
  top: 0.5em;
  left: 1.75em;
  width: 1.5em;
  height: 1em;
  border-radius: 0.5em;
  background-color: #444f55;
  font-weight: bold;
}
.mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~
.mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~
.mole-hole-toggle:checked ~ .mole-loss-modal {
  display: block;
}
.mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~
.mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~
.mole-mole-toggle:checked ~ .mole-win-modal {
  display: block;
}
.mole-score {
  position: absolute;
  top: 0.5em;
  left: 0.5em;
  margin: 0;
  color: #30383b;
  text-align: left;
  font-weight: bold;
  font-size: 0.9em;
  line-height: 1;
}
.mole-score::after {
  content: '000';
  display: block;
  font-size: 2em;
  letter-spacing: 0.1em;
}
.mole-mole-toggle:checked ~ .mole-score::after {
  content: '+10';
}
.mole-hole-toggle:checked ~ .mole-score::after {
  content: '\2212 05';
}
.mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-score::after {
  content: '+20';
}
.mole-hole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-score::after {
  content: '+05';
}
.mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-score::after {
  content: '\2212 10';
}
.mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-score::after {
  content: '+30';
}
.mole-hole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-score::after {
  content: '+15';
}
.mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-score::after {
  content: '000';
}
.mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-score::after {
  content: '\2212 15';
}
.mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-score::after {
  content: '+40';
}
.mole-hole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-score::after {
  content: '+25';
}
.mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-score::after {
  content: '+10';
}
.mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-score::after {
  content: '\2212 05';
}
.mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-score::after {
  content: '\2212 20';
}
.mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-score::after {
  content: '+50';
}
.mole-hole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-score::after {
  content: '+35';
}
.mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-score::after {
  content: '+20';
}
.mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-score::after {
  content: '+05';
}
.mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-score::after {
  content: '\2212 10';
}
.mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-score::after {
  content: '\2212 25';
}
.mole-hole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-score::after {
  content: '+45';
}
.mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-score::after {
  content: '+30';
}
.mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-score::after {
  content: '+15';
}
.mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-score::after {
  content: '000';
}
.mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-score::after {
  content: '\2212 15';
}
.mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-score::after {
  content: '+40';
}
.mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-score::after {
  content: '+25';
}
.mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-score::after {
  content: '+10';
}
.mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-score::after {
  content: '\2212 05';
}
.mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-score::after {
  content: '+35';
}
.mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-score::after {
  content: '+20';
}
.mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-score::after {
  content: '+05';
}
.mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-score::after {
  content: '+30';
}
.mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-score::after {
  content: '+15';
}
.mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-score::after {
  content: '+25';
}
.mole-help-button {
  position: absolute;
  top: 0.5em;
  right: 0.5em;
}
.mole-help-toggle:checked + .mole-help-modal {
  display: block;
}
body {
  margin: 0;
  background-color: #161819;
  color: #617078;
  text-align: center;
  font: 20px/1.5 'Titillium Web', sans-serif;
}
.button {
  display: inline-block;
  border: 0.1em solid #444f55;
  border-radius: 0.3em;
  padding: 0.5em;
  background-color: #617078;
  color: #3d484c;
  text-decoration: none;
  font-size: 1em;
  line-height: 1;
  font-weight: bold;
  cursor: pointer;
  user-select: none;
}
.button-small {
  padding: 0.3em;
  font-size: 0.9em;
}
.button:hover {
  background-color: #6f828b;
}
.button:active,
.timer-analog-toggle:checked ~ .timer-controls .timer-analog,
.timer-digital-toggle:checked ~ .timer-controls .timer-digital {
  background-color: #546269;
}
.toggle {
  display: none;
}
.demo-content {
  position: relative;
  width: 39em;
  height: 7em;
  overflow: hidden;
  background-color: #546269;
}
@keyframes hammer {
  0% {
    transform: rotate(-30deg);
  }
  50% {
    transform: rotate(-45deg);
  }
  100% {
    transform: rotate(-30deg);
  }
}
@keyframes mole {
  1.11% {
    top: 1em;
    left: 23em;
  }
  1.34% {
    top: -8em;
  }
  2.36% {
    top: 2.5em;
    left: 17em;
  }
  2.60% {
    top: -8em;
  }
  3.75% {
    top: 2.5em;
    left: 17em;
  }
  3.90% {
    top: -8em;
  }
  4.84% {
    top: 2.5em;
    left: 29em;
  }
  5.00% {
    top: -8em;
  }
  5.72% {
    top: 2.5em;
    left: 5em;
  }
  5.91% {
    top: -8em;
  }
  6.62% {
    top: 2.5em;
    left: 5em;
  }
  6.84% {
    top: -8em;
  }
  7.76% {
    top: 1em;
    left: 23em;
  }
  7.96% {
    top: -8em;
  }
  9.00% {
    top: 2.5em;
    left: 17em;
  }
  9.12% {
    top: -8em;
  }
  10.07% {
    top: 2.5em;
    left: 29em;
  }
  10.21% {
    top: -8em;
  }
  11.07% {
    top: 2.5em;
    left: 29em;
  }
  11.24% {
    top: -8em;
  }
  12.44% {
    top: 1em;
    left: 23em;
  }
  12.64% {
    top: -8em;
  }
  13.78% {
    top: 2.5em;
    left: 17em;
  }
  13.98% {
    top: -8em;
  }
  14.76% {
    top: 2.5em;
    left: 17em;
  }
  14.90% {
    top: -8em;
  }
  15.73% {
    top: 2.5em;
    left: 29em;
  }
  15.96% {
    top: -8em;
  }
  16.56% {
    top: 2.5em;
    left: 5em;
  }
  16.78% {
    top: -8em;
  }
  17.39% {
    top: 1em;
    left: 11em;
  }
  17.52% {
    top: -8em;
  }
  18.29% {
    top: 1em;
    left: 11em;
  }
  18.51% {
    top: -8em;
  }
  19.50% {
    top: 2.5em;
    left: 5em;
  }
  19.70% {
    top: -8em;
  }
  21.05% {
    top: 1em;
    left: 11em;
  }
  21.24% {
    top: -8em;
  }
  22.15% {
    top: 2.5em;
    left: 5em;
  }
  22.38% {
    top: -8em;
  }
  23.27% {
    top: 1em;
    left: 23em;
  }
  23.47% {
    top: -8em;
  }
  24.45% {
    top: 1em;
    left: 23em;
  }
  24.58% {
    top: -8em;
  }
  25.78% {
    top: 1em;
    left: 23em;
  }
  25.94% {
    top: -8em;
  }
  26.65% {
    top: 2.5em;
    left: 29em;
  }
  26.85% {
    top: -8em;
  }
  27.76% {
    top: 2.5em;
    left: 17em;
  }
  27.89% {
    top: -8em;
  }
  28.85% {
    top: 2.5em;
    left: 5em;
  }
  29.06% {
    top: -8em;
  }
  30.02% {
    top: 1em;
    left: 23em;
  }
  30.23% {
    top: -8em;
  }
  30.89% {
    top: 2.5em;
    left: 17em;
  }
  31.05% {
    top: -8em;
  }
  31.76% {
    top: 2.5em;
    left: 5em;
  }
  31.98% {
    top: -8em;
  }
  32.67% {
    top: 2.5em;
    left: 17em;
  }
  32.84% {
    top: -8em;
  }
  33.83% {
    top: 2.5em;
    left: 29em;
  }
  34.07% {
    top: -8em;
  }
  35.16% {
    top: 2.5em;
    left: 5em;
  }
  35.33% {
    top: -8em;
  }
  35.96% {
    top: 2.5em;
    left: 5em;
  }
  36.14% {
    top: -8em;
  }
  36.93% {
    top: 1em;
    left: 11em;
  }
  37.05% {
    top: -8em;
  }
  38.24% {
    top: 2.5em;
    left: 5em;
  }
  38.39% {
    top: -8em;
  }
  39.07% {
    top: 2.5em;
    left: 5em;
  }
  39.22% {
    top: -8em;
  }
  40.85% {
    top: 2.5em;
    left: 17em;
  }
  41.09% {
    top: -8em;
  }
  42.17% {
    top: 2.5em;
    left: 17em;
  }
  42.34% {
    top: -8em;
  }
  43.13% {
    top: 2.5em;
    left: 5em;
  }
  43.34% {
    top: -8em;
  }
  44.41% {
    top: 1em;
    left: 11em;
  }
  44.63% {
    top: -8em;
  }
  45.52% {
    top: 2.5em;
    left: 29em;
  }
  45.71% {
    top: -8em;
  }
  46.48% {
    top: 1em;
    left: 11em;
  }
  46.71% {
    top: -8em;
  }
  47.81% {
    top: 2.5em;
    left: 29em;
  }
  47.94% {
    top: -8em;
  }
  48.69% {
    top: 1em;
    left: 23em;
  }
  48.91% {
    top: -8em;
  }
  49.85% {
    top: 2.5em;
    left: 17em;
  }
  50.07% {
    top: -8em;
  }
  51.15% {
    top: 2.5em;
    left: 5em;
  }
  51.28% {
    top: -8em;
  }
  52.43% {
    top: 2.5em;
    left: 17em;
  }
  52.56% {
    top: -8em;
  }
  53.57% {
    top: 2.5em;
    left: 5em;
  }
  53.75% {
    top: -8em;
  }
  54.56% {
    top: 2.5em;
    left: 5em;
  }
  54.68% {
    top: -8em;
  }
  55.40% {
    top: 1em;
    left: 23em;
  }
  55.53% {
    top: -8em;
  }
  56.55% {
    top: 1em;
    left: 23em;
  }
  56.69% {
    top: -8em;
  }
  57.37% {
    top: 2.5em;
    left: 29em;
  }
  57.56% {
    top: -8em;
  }
  58.75% {
    top: 1em;
    left: 11em;
  }
  58.90% {
    top: -8em;
  }
  59.51% {
    top: 1em;
    left: 23em;
  }
  59.71% {
    top: -8em;
  }
  60.76% {
    top: 2.5em;
    left: 5em;
  }
  60.89% {
    top: -8em;
  }
  61.55% {
    top: 2.5em;
    left: 29em;
  }
  61.78% {
    top: -8em;
  }
  62.56% {
    top: 1em;
    left: 23em;
  }
  62.69% {
    top: -8em;
  }
  63.84% {
    top: 2.5em;
    left: 5em;
  }
  63.98% {
    top: -8em;
  }
  64.73% {
    top: 1em;
    left: 23em;
  }
  64.91% {
    top: -8em;
  }
  66.07% {
    top: 2.5em;
    left: 17em;
  }
  66.24% {
    top: -8em;
  }
  66.90% {
    top: 1em;
    left: 11em;
  }
  67.12% {
    top: -8em;
  }
  67.97% {
    top: 2.5em;
    left: 5em;
  }
  68.18% {
    top: -8em;
  }
  68.88% {
    top: 1em;
    left: 11em;
  }
  69.00% {
    top: -8em;
  }
  69.98% {
    top: 1em;
    left: 11em;
  }
  70.13% {
    top: -8em;
  }
  70.74% {
    top: 2.5em;
    left: 17em;
  }
  70.87% {
    top: -8em;
  }
  71.51% {
    top: 2.5em;
    left: 29em;
  }
  71.65% {
    top: -8em;
  }
  72.66% {
    top: 2.5em;
    left: 29em;
  }
  72.89% {
    top: -8em;
  }
  73.58% {
    top: 1em;
    left: 11em;
  }
  73.73% {
    top: -8em;
  }
  74.90% {
    top: 1em;
    left: 11em;
  }
  75.10% {
    top: -8em;
  }
  75.71% {
    top: 1em;
    left: 23em;
  }
  75.90% {
    top: -8em;
  }
  76.86% {
    top: 1em;
    left: 23em;
  }
  77.02% {
    top: -8em;
  }
  78.07% {
    top: 1em;
    left: 23em;
  }
  78.27% {
    top: -8em;
  }
  79.14% {
    top: 2.5em;
    left: 17em;
  }
  79.33% {
    top: -8em;
  }
  79.95% {
    top: 1em;
    left: 11em;
  }
  80.91% {
    top: 2.5em;
    left: 29em;
  }
  81.10% {
    top: -8em;
  }
  82.29% {
    top: 1em;
    left: 11em;
  }
  82.45% {
    top: -8em;
  }
  83.57% {
    top: 2.5em;
    left: 29em;
  }
  83.75% {
    top: -8em;
  }
  84.55% {
    top: 2.5em;
    left: 17em;
  }
  84.77% {
    top: -8em;
  }
  85.79% {
    top: 1em;
    left: 11em;
  }
  85.95% {
    top: -8em;
  }
  86.92% {
    top: 2.5em;
    left: 29em;
  }
  87.14% {
    top: -8em;
  }
  87.90% {
    top: 2.5em;
    left: 17em;
  }
  88.12% {
    top: -8em;
  }
  88.95% {
    top: 2.5em;
    left: 29em;
  }
  89.14% {
    top: -8em;
  }
  89.97% {
    top: 2.5em;
    left: 5em;
  }
  90.10% {
    top: -8em;
  }
  91.26% {
    top: 1em;
    left: 11em;
  }
  91.41% {
    top: -8em;
  }
  92.29% {
    top: 1em;
    left: 11em;
  }
  92.45% {
    top: -8em;
  }
  93.06% {
    top: 2.5em;
    left: 5em;
  }
  93.24% {
    top: -8em;
  }
  93.88% {
    top: 2.5em;
    left: 5em;
  }
  94.02% {
    top: -8em;
  }
  95.07% {
    top: 2.5em;
    left: 29em;
  }
  95.29% {
    top: -8em;
  }
  96.29% {
    top: 1em;
    left: 23em;
  }
  96.42% {
    top: -8em;
  }
  97.51% {
    top: 2.5em;
    left: 17em;
  }
  97.74% {
    top: -8em;
  }
  98.40% {
    top: 2.5em;
    left: 29em;
  }
  98.61% {
    top: -8em;
  }
  99.28% {
    top: 2.5em;
    left: 29em;
  }
  99.51% {
    top: -8em;
  }
}

Output Till Now

whac a mole using html and css

Written by: Piyush Patil

Code Credits: @deeptoaster

If you found any mistakes or have any doubts please feel free to Contact Us

Hope you find this post helpful💖

Share your love