HTML
<div class="container">
<div class="al">
<div class="lado"></div>
<div class="lado3"></div>
<div class="al3"></div>
<div class="baby">
<div class="legs9"></div>
<div class="bebe">
<div class="hand"><div class="dedo"></div></div>
<div class="brazo"></div>
<div class="bodys"></div>
<div class="legs12"></div>
</div>
<div class="face">
<div class="orejas"></div>
<div class="cejas"></div>
<div class="ojos3"></div>
<div class="chu"></div>
</div>
</div>
</div>
</div>
</div>
CSS
body{
background:black;
}
.container{
position:relative;
width:400px;
height:300px;
background:#172b49;
margin:231px auto;
}
.al{
position: absolute;
width: 231px;
height: 152px;
margin: 20px 0;
background: #a8cef7;
border-radius: 50% / 10%;
margin:75px 90px;
}
.al::before {
content: '';
position: absolute;
top: 10%;
bottom: 10%;
right: -5%;
left: -5%;
background: inherit;
border-radius: 5% / 50%;
}
.al3{
position: absolute;
width: 192px;
height: 132px;
margin: 20px 0;
background: #7cbbff;
border-radius: 50% / 10%;
margin:12px 21px;
}
.al3::before {
content: '';
position: absolute;
top: 10%;
bottom: 10%;
right: -5%;
left: -5%;
background: inherit;
border-radius: 5% / 50%;
}
.lado,.lado3{
position:absolute;
width:35px;
height:35px;
border-radius:100%;
background: #a8cef7;
}
.lado::before, .lado3::before{
content:"";
position:absolute;
width:35px;
height:35px;
border-radius:100%;
background: #a8cef7;
margin:0px 219px;
}
.lado{margin:-3px -12px;}
.lado3{margin:121px -12px;}
.baby{
position:absolute;
margin:-370px -271px
}
.bebe{
position:absolute;
margin:0 0;
animation:sube 3s alternate infinite;
}
.face{
position:absolute;
width:70px;
height:70px;
border-radius:100%;
background:#F9DCC0;
margin:400px 300px;
animation:sube 3s alternate infinite;
}
.face::before{
content:"";
position:absolute;
width:80px;
height:59px;
border-radius:100%;
background:#F9DCC0;
border-bottom:3px solid #EA9960;
margin:21px 0px;
transform:rotate(-12deg)
}
.cejas{
position:absolute;
width:16px;
height:9px;
border-radius:100%;
border-top:1px solid #121212;
margin:35px 12px;
transform:rotate(-12deg)
}
.cejas::before{
content:"";
position:absolute;
width:16px;
height:9px;
border-radius:100%;
border-top:1px solid #121212;
margin:-3px 33px;
transform:rotate(-12deg)
}
.ojos3{
position:absolute;
width:25px;
height:25px;
border-radius:100%;
border-bottom:3px solid #121212;
margin:33px 9px;
transform:rotate(-12deg)
}
.ojos3::before{
content:"";
position:absolute;
width:25px;
height:25px;
border-radius:100%;
border-bottom:3px solid #121212;
margin:-1px 33px;
transform:rotate(-12deg)
}
.ojos3::after{
content:"";
position:absolute;
width:25px;
height:25px;
border-radius:100%;
border-right:5px solid #212121;
margin:-40px 7px;
transform:rotate(-12deg)
}
.orejas{
position:absolute;
width:30px;
height:35px;
border-radius:100%;
background:#F9DCC0;
border-left:5px solid #F9C695;
margin:25px -7px;
}
.orejas::before{
content:"";
position:absolute;
width:30px;
height:35px;
border-radius:100%;
background:#F9DCC0;
border-right:5px solid #F9C695;
margin:-12px 47px;
transform:rotate(-12deg)
}
.chu{
position:absolute;
width:21px;
height:21px;
border-radius:100%;
background:#7021D1;
margin:55px 32px;
animation:ch .7s alternate infinite;
}
.chu::after{
content:"";
position:absolute;
width:9px;
height:9px;
border-radius:100%;
background:#9462D1;
margin:6px 6px
}
.chu::before{
content:"";
position:absolute;
width:14px;
height:14px;
border-radius:100%;
border:3px solid #9260D1;
margin:7px 3px
}
.brazo{
position:absolute;
width: 70px;
height: 150px;
border-bottom: 21px solid #7021D1;
border-left: 21px solid transparent;
border-right: 21px solid transparent;
border-radius: 100px / 100px;
margin:335px 265px;
transform:rotate(-55deg);
animation:sube3 3s alternate infinite;
}
.bodys{
position:absolute;
width: 65px;
height: 80px;
-webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
background:#7021D1;
margin:400px 375px;
transform:rotate(-80deg);
}
.hand{
position:absolute;
width:17px;
height:17px;
border-radius:7px;
background:#F9DCC0;
margin:475px 340px;
transform:rotate(-7deg)
}
.dedo{
position:absolute;
width:14px;
height:1px;
background:#EA9960;
margin:12px 0px
}
.dedo:before{
content:"";
position:absolute;
width:14px;
height:1px;
background:#EAB38C;
margin:-3px 0px
}
.legs12{
position:absolute;
width:35px;
height:50px;
border-radius:100%;
background:#7021D1;;
transform:rotate(60deg);
margin:430px 400px;
}
.legs12::before{
content:"";
position:absolute;
width:21px;
height:55px;
border-radius:100%;
background:#7021D1;;
transform:rotate(-121deg);
margin:5px 25px;
}
.legs12::after{
content:"";
position:absolute;
width:21px;
height:17px;
border-radius:100%;
background:#7021D1;
transform:rotate(21deg);
margin:12px 50px;
}
.legs9{
position:absolute;
width:35px;
height:50px;
border-radius:100%;
background:#541C72;
transform:rotate(30deg);
margin:430px 412px;
}
.legs9::before{
content:"";
position:absolute;
width:21px;
height:55px;
border-radius:100%;
background:#541C72;
transform:rotate(-121deg);
margin:3px 25px;
}
.legs9::after{
content:"";
position:absolute;
width:21px;
height:17px;
border-radius:100%;
background:#541C72;
transform:rotate(21deg);
margin:12px 50px;
}
.redon{
position:absolute;
width:231px;
height:90px;
border-radius:100%;
background:#0D1826;
margin:470px 312px
}
.circ3{
position:absolute;
width:450px;
height:450px;
border-radius:100%;
background:#0D1826;
margin:12px 172px
}
@keyframes va{
0%{transform:rotate(3deg)}
100%{transform:rotate(-3deg)}
}
@keyframes va3 {
0%{transform:translatex(-21px)}
100%{transform:translatex(12px)}
}
@keyframes ch {
0%{transform:translatey(0px);}
100%{transform:translatey(-3px);}
}
@keyframes sube {
0%{transform:translatey(0px)}
100%{transform:translatey(-5px)}
}
