CSS3, the Pig.

Every week to have front-end sharing, I would like to share the C3 animation, preparation work to draw a pig head first. The result was a decisive abandonment???? Attached code

Html
Body {
Background: #ff6600;
}
. body {
position:relative;
top:50px;
left:50%;
width:300px;
Margin-left: -150px;
}
. face {
height:180px;
width:180px;
Background:white;
border-radius:50%;
border:15px solid white;
Position:absolute;
Top: -10px;
Left: -30px;
}
. Eyes:before,
. eyes:after {
Content: "";
Position:absolute;
width:30px;
height:25px;
border-top:2px solid #ff6600;
border-left:2px solid #ff6600;
border-top-left-radius:100%;
top:36px;
-webkit-transform:rotate (40DEG);
-moz-transform:rotate (40DEG);
-ms-transform:rotate (40DEG);
-o-transform:rotate (40DEG);
Transform:rotate (40DEG);
}
. eyes:before {
left:40px;
}
. eyes:after {
right:40px;
}
. Nose {
Background: #ff6600;
height:50px;
width:70px;
border:15px solid white;
border-radius:50%;
Position:absolute;
left:50%;
top:50%;
Margin-left: -50px;
Margin-top: -30px;
}
. Nose:before,
. nose:after {
Content: "";
height:12px;
width:12px;
border-radius:50%;
Background:white;
Position:absolute;
top:18px;
}
. nose:before {
left:10px;
}
. nose:after {
right:10px;
}
. Left_ear,
. right_ear {
Overflow:hidden;
height:70px;
width:60px;
Position:absolute;
Background:transparent;
}
. left_ear {
Top: -18px;
Left: -46px;
-webkit-transform:rotate (58DEG);
Transform:rotate (32DEG);
}
. right_ear {
Top: -14px;
left:170px;
-webkit-transform:rotate (120DEG);
Transform:rotate (146DEG);
}
. Left_ear:before,
. right_ear:before {
-webkit-transform:rotate ( -45DEG);
Transform:rotate ( -45DEG);
Content: "";
height:50px;
width:50px;
position:relative;
left:15px;
Display:block;
Background:transparent;
#ff6600;
border:15px solid white;
border-radius:5px 80px 30px 80px;
}
. Mouth {
width:100px;
height:80px;
border-radius:70%;
border-bottom:10px #ff6600 Solid;
Position:absolute;
top:60px;
left:38px;
}

<div class= "Body" >
<div class= "Face" >
<div class= "Left_ear" ></div>
<div class= "Right_ear" ></div>
<div class= "Eyes" ></div>
<div class= "Nose" ></div>
<div class= "Mouth" ></div>
</div>

</div>

CSS3, the Pig.