<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3僵尸宝宝头像</title>
<style>
#title {
font-family: 'Creepster', cursive;
font-size: 40px;
color: #8aaf48;
text-align: center;
padding-top: 40px;
}
.contain {
width: 300px;
margin: 0 auto;
position: relative;
padding-top: 100px;
}
#head {
width: 300px;
height: 300px;
background: #CCE7A0;
border-radius: 50%;
box-shadow: inset 43px 0px 3px 2px #BFD99A;
}
.cut {
height: 75px;
width: 100px;
border-radius: 90px 90px 0 0;
-moz-border-radius: 90px 90px 0 0;
-webkit-border-radius: 90px 90px 0 0;
background: #FE98A6;
position: absolute;
-moz-transform: rotate(20deg);
-webkit-transform: rotate(20deg);
-o-transform: rotate(20deg);
-ms-transform: rotate(20deg);
transform: rotate(13deg);
left: 175px;
top: 102px;
}
.cut:before {
content: ' ';
display: block;
width: 80px;
height: 80px;
border-radius: 50%;
background: #FE98A6;
position: absolute;
top: 26px;
left: 25px;
}
.cut:after {
content: ' ';
display: block;
width: 80px;
height: 80px;
border-radius: 50%;
background: #FE98A6;
position: absolute;
top: 12px;
left: -26px;
}
.eye {
background: white;
width: 60px;
height: 60px;
border-radius: 50%;
position: relative;
border: 5px solid #b9ce96;
}
.eye.left {
left: 65px;
top: 106px;
}
.eye.right {
left: 165px;
top: 35px;
background: #fffcac;
}
.pupil {
background: black;
width: 20px;
height: 20px;
border-radius: 50%;
left: 36px;
position: absolute;
top: 27px;
}
.pupil.left {
top: 10px;
}
.nose:before {
content: ' ';
width: 25px;
height: 25px;
display: block;
background: #575675;
border-radius: 50%;
position: relative;
left: 115px;
top: 75px;
}
.nose:after {
content: ' ';
width: 25px;
height: 25px;
display: block;
background: #575675;
border-radius: 50%;
position: relative;
left: 154px;
top: 50px;
}
.mouth {
width: 130px;
height: 40px;
background: #575675;
border-radius: 10px;
position: relative;
top: 71px;
left: 82px;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
}
.tooth {
width: 20px;
height: 17px;
background: #fff;
position: relative;
}
.tooth.first {
left: 20px;
}
.tooth.second {
left: 86px;
top: -17px;
}
.tooth.third {
left: 44px;
top: -4px;
}
.blood:before {
content: ' ';
background: #8D3B44;
width: 40px;
height: 22px;
display: block;
border-radius: 10px;
position: relative;
top: -27px;
left: 80px;
z-index: -1;
}
.blood:after {
content: ' ';
background: #8D3B44;
width: 20px;
height: 47px;
display: block;
border-radius: 10px;
position: relative;
top: -55px;
left: 108px;
z-index: -1;
}
.ear {
width: 50px;
height: 50px;
position: absolute;
background: #BFD99A;
}
.ear.left {
top: 220px;
left: -25px;
-webkit-border-radius: 15px 0 0 15px;
border-radius: 15px 0 0 15px;
}
.ear.right {
top: 220px;
left: 277px;
-webkit-border-radius: 0px 15px 15px 0px;
border-radius: 0px 15px 15px 0px;
z-index: -1;
}
</style>
</head>
<body>
<div class="contain">
<div id="head">
<div class="cut"></div>
<div class="ear left"></div>
<div class="ear right"></div>
<div class="eye left">
<div class="pupil left"></div>
</div>
<div class="eye right">
<div class="pupil "></div>
</div>
<div class="nose"></div>
<div class="mouth">
<div class="tooth first"></div>
<div class="tooth second"></div>
<div class="tooth third"></div>
<div class="blood"></div>
</div>
</div>
</div>
</body>
</html>