Pac Man (c) lipelip

dabblet.css

/**
 * Pac Man (c) lipelip

 */


/* aniation des deux demi-cercles de pacman */
@keyframes eatup {
	0% 	{ transform: rotate(0deg); }
	50% 	{ transform: rotate(45deg); }
	100% 	{ transform: rotate(0deg); }
}
	.eatup { animation: eatup .5s infinite ease-in-out; }

@keyframes eatdown {
	0% 	{ transform: rotate(0deg); }
	50% 	{ transform: rotate(-45deg); }
	100% 	{ transform: rotate(0deg); }
}
	.eatdown { animation: eatdown .5s infinite ease-in-out; }

/* rotation de pac man mort et des demi-cercles */
@keyframes pacmandead {
	0%		{ transform: rotate(45deg); 	}
	100%	{ transform: rotate(90deg); }
}
@keyframes eatupdead {
	0% 	{ transform: rotate(45deg); }
	70% 	{ transform: rotate(90deg); opacity: 1; }
	100%	{ transform: rotate(90deg); opacity: 0; }

}
@keyframes eatdowndead {
	0% 	{ transform: rotate(-45deg); }
	70% 	{ transform: rotate(-90deg); opacity: 1; }
	100% 	{ transform: rotate(-90deg); opacity: 0; }
}

/* animation des yeux */
@keyframes iris {
	0% 	{ transform: translateX(0); }
	50% 	{ transform: translateX(10px); }
	100% 	{ transform: translateX(0); }
}
	.iris { animation: iris 1.5s infinite ease-in-out; }		



body {
	background: #111;
	overflow-y: hidden;
}
/* PACMAN */
#pacman {
	position: absolute;
	right: 20%;
	bottom: 50%; margin-bottom: -45px;
	z-index: 20;
	transition: all 2s linear;
}

#top {
	background: yellow;
	border-radius: 90px 90px 0 0;
	height: 45px;
	width: 90px;
	transform-origin: center bottom;
}
#bottom {
	background: yellow;
	border-radius: 0 0 90px 90px;
	height: 45px;
	width: 90px;
	transform-origin: center top;
}

/*MECHANT*/
#mechant { 
	 height: 90px; width: 90px;
	 position: absolute;
	 left: 50%; margin-left: -45px;
	 top: 50%; margin-top: -45px;
	 transition: all 2s linear;
}
#tete { height: 70px; background: cyan; width: 90px; border-radius: 50px 50px 0 0; }
	.eyes { 
		width: 20px; height: 20px; border-radius: 10px;
		background: #fff; 
		position: absolute;
		top: 20px; left: 15px;
		}
	.eyes + .eyes { left: 45px; }
	.iris {
		width: 10px; height: 10px; border-radius: 5px;
		background: #000; 
		top: 5px;
		position: absolute;
	}		
.boule { width: 26px; height: 26px; background: cyan; border-radius: 13px; position: absolute; bottom: 5px; }
	.boule + .boule { left: 21px; }
	.boule + .boule + .boule { left: 42px; }
	.boule + .boule + .boule + .boule { left: 64px; }

.pacbouffe {
	width: 30px; height: 30px; border-radius: 15px;
	background: #FFF;
	position: absolute;
	bottom: 50%; margin-bottom: -15px;
	left: 20%;
	transition: all 2s linear;
}
							
/* Pour attrapper la pacbouffe */			
@media (max-height : 500px) {
	#mechant { top: 20%; }
	.pacbouffe, #pacman { bottom: 20%; }
}
			
/* mort de pacman */			
@media (max-width : 452px) and (min-height: 501px) {
	#pacman {
		animation: pacmandead .6s linear .3s;	
		animation-fill-mode: forwards;
	}
	#top {
		animation: eatupdead .6s linear .8s;	
		animation-fill-mode: both;
	}
	#bottom {
		animation: eatdowndead .6s linear .8s;	
		animation-fill-mode: both;
	}	
}

/* victoire de pacman */			
@media (max-height : 501px) and (max-width: 200px) {
	
	.pacbouffe {
		transform: scale(0);
		transition-duration: .4s;
	}
	#tete, .boule {
		background: #FFF;
	}
	.eyes, .iris { background: red; }
	#mechant {
		left: -150%;
	}
	#mechant:after {
		width: 50px;
		height: 5px;
		background: red;
		content: "";
		bottom: 25px;
		left: 15px;
		z-index: 200;
		position: absolute;
	}
}

dabblet.html

<div id="pacman">
	<div id="pacdead"></div><!-- end -->
	<div id="top" class="eatup"></div><!-- end -->
	<div id="bottom" class="eatdown"></div><!-- end -->
</div><!-- end -->
	<div id="mechant">
	<div id="tete">
	<div class="eyes">
		<div class="iris"></div><!-- end -->
	</div><!-- end -->
	<div class="eyes">
		<div class="iris"></div><!-- end -->
	</div><!-- end -->
	</div><!-- end -->
	<div class="boule"></div><!-- end -->
	<div class="boule"></div><!-- end -->
	<div class="boule"></div><!-- end -->
	<div class="boule"></div><!-- end -->
</div><!-- end -->
<div class="pacbouffe"></div><!-- end -->

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"70","seethrough":"","prefixfree":"1","page":"all"}