html画海绵宝宝css3,CSS3 海绵宝宝

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;

}