HTML
<div class="container">
<div class="advocato">
<div class="advo">
<div class="eyes"></div>
<div class="eyes3"></div>
<div class="boca3"></div>
<div class="circ"></div>
<div class="legs"></div>
<div class="cat">
<div class="orejas"></div>
<div class="orejas3"></div>
<div class="advcat">
<div class="ojos"></div>
<div class="hocico"></div>
</div>
</div>
</div>
</div>
</div>
CSS
body{
background:black;
}
.container{
position:relative;
width:400px;
height:300px;
background:#eaccbe;
margin:121px auto;
padding-top:30px;
}
.advocato{
position:relative;
margin:0 auto;
}
.advo{
position:relative;
width: 201px;
height: 271px;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
border: 7px solid #407437;
background:#c8d365;
margin: 0 auto;
}
.advo::before{
content:"";
position:absolute;
width: 192px;
height: 261px;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
background:#EFEE7A;
margin: 5px;
}
.eyes,.eyes3{
position:absolute;
width:21px;
height:21px;
border-radius:100%;
background:black;
animation:abre 3s alternate infinite;
}
.eyes{margin:70px 45px}
.eyes3{margin:70px 135px}
.eyes::before,.eyes3::before{
content:"";
position:absolute;
width:7px;
height:7px;
border-radius:100%;
background:white;
margin:3px 3px
}
.boca3{
position:absolute;
width:25px;
height:14px;
border-radius: 0 0 21px 21px;
background:#930241;;
margin:90px 90px;
animation:ri 3s alternate infinite;
}
.boca3::before{
content:"";
position:absolute;
width:12px;
height:7px;
border-radius: 0 0 21px 21px;
background:#db3974;
margin:4px 6px
}
.circ{
position:absolute;
width:102px;
height:102px;
border-radius:100%;
border:5px solid #d6d455;
background:#c6c55d;
margin:121px 43px
}
.cat{
position:absolute;
transform:scale(.7);
margin:80px 30px;
animation:sube 3s alternate infinite;
}
.advcat{
position:absolute;
width: 121px;
height: 125px;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
background:#db8127;
margin:70px 40px
}
.advcat::before{
content:"";
position:absolute;
width: 112px;
height: 112px;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
background:#ea9035;
margin:7px 3px
}
.ojos{
position:absolute;
width:35px;
height:35px;
border-radius:100%;
border-top:7px solid black;
margin:65px 12px
}
.ojos::before{
content:"";
position:absolute;
width:35px;
height:35px;
border-radius:100%;
border-top:7px solid black;
margin:-7px 57px
}
.hocico{
position:absolute;
width:21px;
height:21px;
border-radius:100%;
border-right:3px solid black;
border-bottom:3px solid black;
margin:85px 37px
}
.hocico::before{
content:"";
position:absolute;
width:21px;
height:21px;
border-radius:100%;
border-left:3px solid black;
border-bottom:3px solid black;
margin:0px 21px
}
.hocico::after{
content:"";
position:absolute;
width: 16px;
height: 12px;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
background:black;
margin:-5px 14px
}
.orejas,.orejas3{
position:absolute;
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-bottom: 35px solid #ea9035;
}
.orejas{
transform:rotate(-45deg);
margin:65px 26px
}
.orejas3{
transform:rotate(45deg);
margin:65px 125px}
.legs{
position:absolute;
width:21px;
height:12px;
border-radius: 21px 21px 0 0;
background:#ea9035;
margin:209px 65px
}
.legs::before{
content:"";
position:absolute;
width:21px;
height:12px;
border-radius: 21px 21px 0 0;
background:#ea9035;
margin:0px 50px
}
@keyframes sube{
0%{transform:translateY(0px) scale(.7)}
100%{transform:translateY(5px) scale(.7)}
}
@keyframes abre{
0%,25%{opacity:1}
35%{opacity: 0}
50%{opacity:1;}
100%{opacity:1}
}
@keyframes ri{
0%{transform:scaleX(1)}
50%{transform:scaleX(.85)}
}
