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 –
- Neomorphic Tic Tac Toe Game using HTML and CSS Only
- Whac a mole game using HTML and CSS Only
- Plankman Game using HTML and CSS Only
- Rock Paper Scissor Game using HTML and CSS Only
- Carnival Target Practice Game using HTML and 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—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
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💖
