Panda and butterfly (Only CSS)
HTML
<div class="contenedor">
<div class="oso">
<div class="leg3"></div>
<div class="body">
<div class="leg"></div>
<div class="cabeza"></div>
<span class="eyes3"></span>
<span class="eyes"><span class="iris"></span></span>
<span class="nariz"></span>
</div>
<div class="cola"></div>
</div>
<div class="butter"><span class="butter3"></span></div>
<div class="ba"></div>
<div class="ba3"></div>
<div class="ba5"></div>
</div>
CSS
body{
background:black;
}
.contenedor{
position:relative;
width:600px;
height:600px;
border-radius:100%;
background:#94AC4E;
margin:221px auto;
}
.oso{
position:absolute;
margin:0 -112px
}
.body{
position:absolute;
width:281px;
height:291px;
border-radius:100%;
background:#493B3B;
border-right:12px solid #3A2E2E;
margin:192px 261px;
}
.body::before{
content:"";
display:block;
width:132px;
height:132px;
border-radius:100%;
background:#93AA4F;
margin:192px 88px
}
.cabeza{
position:absolute;
width:121px;
height:109px;
border-radius:100%;
background:#E3E4D6;
margin:-355px 91px;
}
.eyes{
position:absolute;
width:25px;
height:25px;
border-radius:100%;
background:black;
margin:-312px 107px
}
.eyes::before{
content:"";
position:absolute;
width:25px;
height:25px;
border-radius:100%;
background:black;
margin:0px 65px
}
.iris{
position:absolute;
width:7px;
height:7px;
border-radius:100%;
background:white;
margin:12px 2px
}
.iris::before{
content:"";
position:absolute;
width:7px;
height:7px;
border-radius:100%;
background:white;
margin:0px 67px
}
.eyes3{
position:absolute;
width:35px;
height:40px;
border-radius:93px 63px 65px 90px;
background:#281E1D;
margin:-321px 102px
}
.eyes3::before{
content:"";
position:absolute;
width:35px;
height:40px;
border-radius:63px 90px 93px 65px;
background:#281E1D;
margin:0px 65px
}
.nariz{
position:absolute;
width:30px;
height:21px;
border-radius:100%;
background:#281E1D;
margin:-335px 137px
}
.nariz::before{
content:"";
position:absolute;
width:7px;
height:5px;
border-radius:100%;
background:white;
margin:3px 9px
}
.leg{
position:absolute;
width:50px;
height:60px;
border-radius:100%;
background:#281E1D;
margin:-303px 87px
}
.leg::before{
content:"";
position:absolute;
width:50px;
height:60px;
border-radius:100%;
background:#281E1D;
margin:0px 80px
}
.cola{
position:absolute;
width:40px;
height:40px;
border-radius:100%;
background:#493B3B;
margin:154px 390px;
border-right:6px solid #3A2E2E;
}
.leg3{
position:absolute;
width:50px;
height:80px;
border-radius:21px;
background:#281E1D;
margin:390px 261px;
transform:rotate(21deg);
-moz-transform:rotate(21deg);
-webkit-transform:rotate(21deg);
}
.leg3::before{
content:"";
position:absolute;
width:50px;
height:80px;
border-radius:21px;
background:#281E1D;
margin:-90px 224px;
transform:rotate(-42deg);
-moz-transform:rotate(-42deg);
-webkit-transform:rotate(-42deg);
}
.butter{
position:absolute;
width:35px;
height:50px;
border-radius:100%;
background:#CE062D;
margin:155px 367px;
transform:rotate(-12deg);
-moz-transform:rotate(-12deg);
-webkit-transform:rotate(-12deg);
animation:sube .9s alternate infinite;
-moz-animation:sube .9s alternate infinite;
-webkit-animation:sube .9s alternate infinite;
}
.butter::before{
content:"";
position:absolute;
width:45px;
height:60px;
border-radius:100%;
background:#E61938;
margin:3px 9px;
transform:rotate(21deg);
-moz-transform:rotate(21deg);
-webkit-transform:rotate(21deg);
}
.butter::after{
content:"";
position:absolute;
width:40px;
height:60px;
border-radius:100%;
background:#E61938;
opacity:.7;
margin:21px 25px;
transform:rotate(90deg);
-moz-transform:rotate(90deg);
-webkit-transform:rotate(90deg);
}
.butter3{
position:absolute;
width:40px;
height:9px;
border-radius:100%;
background:#6F1200;
transform:rotate(50deg);
-moz-transform:rotate(50deg);
-webkit-transform:rotate(50deg);
margin:57px -3px
}
.butter3::before{
content:"";
display:block;
width:12px;
height:12px;
border-radius:100%;
background: #6F1200;
margin:0px -9px
}
.butter3::after{
content:"";
display:block;
width:21px;
height:12px;
border-radius:100%;
border-top:3px solid #6F1200;
margin:-9px -21px
}
.ba{
position:absolute;
width:21px;
height:90px;
background:#4A3C3B;
border-bottom:4px solid #281E1D;
margin:192px 90px
}
.ba::before{
content:"";
position:absolute;
width:21px;
height:90px;
background:#4A3C3B;
border-bottom:3px solid #281E1D;
margin:93px 0px
}
.ba::after{
content:"";
position:absolute;
width:21px;
height:90px;
background:#4A3C3B;
border-bottom:3px solid #281E1D;
margin:186px 0px
}
.ba3{
position:absolute;
width:21px;
height:90px;
background:#4A3C3B;
border-bottom:4px solid #281E1D;
margin:291px 40px;
transform:rotate(-21deg);
-moz-transform:rotate(-21deg);
-webkit-transform:rotate(-21deg);
}
.ba3::before{
content:"";
position:absolute;
width:21px;
height:90px;
background:#4A3C3B;
margin:93px 0px
}
.ba5{
position:absolute;
width:21px;
height:90px;
background:#4A3C3B;
border-bottom:4px solid #281E1D;
margin:192px 490px
}
.ba5::before{
content:"";
position:absolute;
width:21px;
height:90px;
background:#4A3C3B;
border-bottom:3px solid #281E1D;
margin:93px 0px
}
.ba5::after{
content:"";
position:absolute;
width:21px;
height:90px;
background:#4A3C3B;
border-bottom:3px solid #281E1D;
margin:186px 0px
}
@keyframes sube{
0%{margin:155px 367px;}
100%{margin:142px 367px;}
}
@-moz-keyframes sube{
0%{margin:155px 367px;}
100%{margin:142px 367px;}
}
@-webkit-keyframes sube{
0%{margin:155px 367px;}
100%{margin:142px 367px;}
}
