CSS
语言:
CSSSCSS
确定
body {
background: #F9ED39;
zoom: .5;
}
.rosto {
position: absolute;
top: 30%;
left: 50%;
margin-left: -200px;
}
.olho {
height: 200px;
width: 200px;
background: #FFF;
border-radius: 100%;
border: 6px solid #000;
position: relative;
display: inline-block;
margin-left: -5px;
}
.olho1 {
background: #4AF;
height: 100px;
width: 100px;
border: 4px solid #000;
border-radius: 100%;
position: absolute;
}
#esquerdo > .olho1 {
left: 80px;
top: 50px;
}
#direito > .olho1 {
right: 80px;
top: 50px;
}
.olho2 {
background: #000;
height: 50px;
width: 50px;
border: 3px solid #000;
border-radius: 100%;
position: absolute;
}
#esquerdo > .olho2 {
left: 110px;
top: 75px;
}
#direito > .olho2 {
right: 110px;
top: 75px;
}
.sobrancelha {
height: 10px;
width: 40px;
background: #000;
position: absolute;
}
#primeira-sobrancelha {
margin-top: -5px;
margin-left: 10px;
-webkit-transform: rotate(50deg);
transform: rotate(50deg);
}
#segunda-sobrancelha {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
margin-left: 80px;
margin-top: -26px;
}
#terceira-sobrancelha {
margin-top: -5px;
-webkit-transform: rotate(-50deg);
transform: rotate(-50deg);
margin-left: 150px;
}
.detail {
width: 50px;
height: 70px;
background-color: rgba(126, 67, 0, 0.15);
border-radius: 100%;
position: absolute;
z-index: -2;
}
.bg-details {
position: relative;
height: 20%;
width: 100%;
}
.nariz {
width: 70px;
-webkit-transform: rotate(10deg);
transform: rotate(10deg);
height: 97px;
border-radius: 50%;
background: #000;
border: 6px solid #000;
position: absolute;
top: 110px;
left: 164px;
}
.nariz-detalhe {
width: 72px;
height: 106px;
border-radius: 50%;
background: #F9ED39;
position: absolute;
top: 8px;
-webkit-transform: rotate(4deg) translateY(-7px);
transform: rotate(4deg) translateY(-7px);
left: -2px;
}
.boca {
top: 170px;
z-index: -1;
left: -50px;
width: 500px;
height: 130px;
border-radius: 50%;
position: absolute;
background: #000;
}
.boca-detalhe {
width: 530px;
height: 140px;
margin-left: -19px;
border-radius: 50%;
background: #F9ED39;
margin-top: -15px;
}
.dente {
height: 50px;
width: 50px;
background: #FFF;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border: 4px solid #000;
position: absolute;
}
#dente-esquerdo {
-webkit-transform: rotate(1deg);
transform: rotate(1deg);
margin-left: 190px;
margin-top: 1px;
}
#dente-direito {
-webkit-transform: rotate(-2deg);
transform: rotate(-2deg);
margin-left: 260px;
}