Owl by

Jaimie Warburton

On: 11 Oct 2016

Personal site: http://www.jaimiewarburton.co.uk

fullscreen 
<div class="head">
	<div class="feather feather1"></div>
	<div class="feather feather2"></div>
	<div class="feather feather3"></div>
	<div class="eye1"></div>
	<div class="eye2"></div>
	<div class="beak"></div>
</div>
<div class="body">
	<div class="wing wing1"></div>
	<div class="wing wing2"></div>
</div>
<div class="leg leg1"></div>
<div class="leg leg2"></div>

@keyframes eyeTwitch {
    0% {height: 10px;}
    5% {height: 2px;}
	10% {height: 10px;}
	100% {height: 10px;}
}

@keyframes headTwitch {
    0% {top: 10px; left: 50%;}
    20% {top: 11px; left: 51%;}
	40% {top: 8px; left: 52%;}
	60% {top: 10px; left: 48%;}
	80% {top: 12px; left: 51%;}
	100% {top: 10px; left: 50%;}
}

.head {
	position: absolute;
	left: 50%;
	transform: translate(-50%,0);
	top: 10px;
	height: 100px;
	background-color: #fff;
	border-radius: 100px;
	width: 80px;
	border: 3px solid #D19F4C;
	animation: headTwitch 1s infinite;
	z-index: 5;
}

.eye1 {
	width: 10px;
	height: 10px;
	background-color: #000;
	border-radius: 10px;
	position:absolute;
	left: 20px;
	top: 40px;
	animation: eyeTwitch 5s infinite;
}

.eye2 {
	width: 10px;
	height: 10px;
	background-color: #000;
	border-radius: 10px;
	position:absolute;
	left: 50px;
	top: 40px;
	animation: eyeTwitch 5s infinite;
	animation-delay: 0.5s;
}

.beak {
	position: absolute;
	left: 32px;
	top: 45px;
	width: 0; 
    height: 0; 
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 20px solid yellow;
	transform: rotate(90deg);
}

.body {
	height: 150px;
	width: 100px;
	background-color: #D19F4C;
	border-radius: 150px;
	position: relative;
	top: 90px;
	left: 245px;
	z-index: -1;
	overflow: hidden;
}

.feather {
	position: absolute;
	width: 0; 
    height: 0;
	z-index: -4;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 20px solid #D19F4C;

}

.feather1 {
	top: 10px;
	left: -13px;
	transform: rotate(210deg);	
}

.feather2 {
	top: 0px;
	left: -4px;
	transform: rotate(230deg);	
}

.feather3 {
	top: -8px;
	left: 6px;
	transform: rotate(240deg);	
}

.wing {
	background-color: #463401;
	height: 100px;
	width: 50px;
	border-radius: 50px/120px;
	position: absolute;
}

.wing1 {
	transform: rotate(10deg);
	top: 20px;
	left: -25px;
}

.wing2 {
	transform: rotate(-10deg);
	top: 20px;
	left: 65px;
}

.leg {
	height: 50px;
	width: 10px;
	background-color: yellow;
	position: absolute;
	z-index: 10;

}

.leg1 {
	top: 230px;
	left: 280px;	
}

.leg2 {
	top: 230px;
	left: 310px;	
}

11