Halloween Pumpkin by

Adam

On: 1 Nov 2016

fullscreen 
<div class="face">
	<div class="eyes left">&#9650;</div>
	<div class="eyes right">&#9650;</div>
	<div class="mouth"> </div>
</div>
<div class="background">
	<div class="light"></div><div class="dark"></div><div class="light"></div><div class="dark"></div><div class="light"></div><div class="dark"></div><div class="light"></div><div class="dark"></div><div class="light"></div><div class="dark"></div>
</div>

body {
	margin: 0;
}

.background {
	width: 100%;
	height: 100vh;
}

.background div {
	display: inline-block;
	width: 10%;
	height: 100vh;
	margin: 0;
}

.light { background-color: #ed6c2c; }

.dark { background-color: #e94c21; }

.face {
	display: flex;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 80%;
	max-width: 450px;
	height: 50vh;
}

.eyes {
	font-size: 10em;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}

.left {
	animation-name: fire;
	position: absolute;
	top: 0;
	left: 0;
}

.right {
	animation-name: firer;
	position: absolute;
	top: 0;
	right: 0;
}

.mouth {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	border-top: 90px solid #731d12;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	height: 0;
	width: 70%;
	margin: 0 auto;
	animation-name: firem;
	animation-duration: 4s;
	animation-iteration-count: infinite;
}


@keyframes fire {
    0%   {color: #731d12; }
    31%  {color: #a92717; }
    40%   {color: #731d12; }
    50%  {color: #a92717; }
    70% {color: #731d12; }
    95%  {color: #a92717; }
    100% {color: #731d12; }
}

@keyframes firer {
    0%   {color: #731d12; }
    29%  {color: #a92717; }
    39%   {color: #731d12; }
    51%  {color: #a92717; }
    69% {color: #731d12; }
    94%  {color: #a92717; }
    100% {color: #731d12; }
}

@keyframes firem {
    0%   {border-top: 90px solid #731d12; }
    27%  {border-top: 90px solid #a92717; }
    43%   {border-top: 90px solid #731d12; }
    47%  {border-top: 90px solid #a92717; }
    73% {border-top: 90px solid #731d12; }
    92%  {border-top: 90px solid #a92717; }
    100% {border-top: 90px solid #731d12; }
}

@media (max-width: 700px) {
	
	.face {
		width: 80%;
		max-width: 300px;
		height: 70vh;
		max-height: 300;
	}
	
	.eyes {
		font-size: 7em;
	    animation-duration: 4s;
	    animation-iteration-count: infinite;
	}

	.mouth {
		border-top: 60px solid #731d12;
	}


	@keyframes firem {
	    0%   {border-top: 60px solid #731d12; }
	    27%  {border-top: 60px solid #a92717; }
	    43%   {border-top: 60px solid #731d12; }
	    47%  {border-top: 60px solid #a92717; }
	    73% {border-top: 60px solid #731d12; }
	    92%  {border-top: 60px solid #a92717; }
	    100% {border-top: 60px solid #731d12; }
	}
}

4