<div class="wrapper">
<div class="body">
<div class="left-ear">
</div>
<div class="inner-ear">
</div>
<div class="inner-ear-right">
</div>
<div class="right-ear">
</div>
<div class="head">
<div class="eye">
<div class="inner-eye">
<div class="shimmer">
</div>
</div>
</div>
<div class="eye align">
<div class="inner-eye">
<div class="shimmer">
</div>
</div>
</div>
</div>
<div class="inner-body">
</div>
<div class="wing">
</div>
<div class="wing-left">
</div>
</div>
</div>
body{
background:url(http://www.halloweenjoys.com/backgrounds/halloween_background_27.gif);
animation:100s scroll infinite linear;
animation:100s scroll infinite linear;
animation:100s scroll infinite linear;
animation:100s scroll infinite linear;
animation:100s scroll infinite linear;
}
@-webkit-keyframes scroll{
100%{
background-position:0px -3000px;
}
}
@-moz-keyframes scroll{
100%{
background-position:0px -3000px;
}
}
@-o-keyframes scroll{
100%{
background-position:0px -3000px;
}
}
@-ms-keyframes scroll{
100%{
background-position:0px -3000px;
}
}
@keyframes scroll{
100%{
background-position:0px -3000px;
}
}
.head{
width:200px;
border-radius:50%;
height:180px;
background:#333;
position:relative;
border-bottom:20px solid #222;
z-index:1000;
box-shadow:#000 0px 2px 10px;
.eye{
width:60px;
position:absolute;
top:50px;
height:65px;
left:35px;
background:#FFF;
border-radius:50%;
border:5px solid #222;
}
.align{
left:100px;
}
.inner-eye{
width:30px;
height:30px;
border-radius:50px;
background:#222;
position:absolute;
left:15px;
top:17px;
.shimmer{
width:10px;
height:10px;
border-radius:20px;
position:absolute;
top:7px;
left:5px;
background:rgba(255,255,255,0.2);
}
}
}
.left-ear{
width:80px;
height:150px;
top:-50px;
left:120px;
z-index:0;
background:#333;
position:absolute;
z-index:0;
border-top-right-radius:100px;
border-top:10px solid #222;
}
.right-ear{
width:80px;
height:150px;
top:-50px;
left:0px;
z-index:0;
background:#333;
position:absolute;
border-top-left-radius:100px;
border-top:10px solid #222;
}
.inner-ear{
width:50px;
height:140px;
top:-30px;
left:130px;
z-index:0;
background:#222;
position:absolute;
z-index:1000;
border-top-right-radius:100px;
}
.inner-ear-right{
width:50px;
height:140px;
top:-30px;
left:20px;
z-index:0;
background:#222;
position:absolute;
z-index:1000;
border-top-left-radius:100px;
}
.body{
position:relative;
left:140px;
transform:scale(0.8);
transform:scale(0.8);
transform:scale(0.8);
transform:scale(0.8);
transform:scale(0.8);
}
.inner-body{
width:200px;
height:400px;
top:40px;
border-radius:50%;
background:#333;
position:absolute;
z-index:-1000;
border-bottom:15px solid #222;
box-shadow:#000 0px 2px 10px;
}
.wing{
width:300px;
height:250px;
position:absolute;
right:200px;
top:90px;
background:#333;
border-top:50px solid #222;
border-top-right-radius:100%;
z-index:-2000;
}
.wing-left{
width:300px;
height:250px;
position:absolute;
left:-150px;
top:90px;
background:#333;
border-top:50px solid #222;
border-top-left-radius:100%;
z-index:-2000;
}
.wrapper{
width:560px;
margin:0 auto;
margin-top:5%;
}
xxxxxxxxxx