HTML
<div class="contenedor">
<div class="compu">
<span class="hueso"><span class="redon"></span><span class="redon3"></span></span>
</div>
<div class="dog">
<span class="brazos"></span>
<span class="head"> <span class="orejas"></span></span>
<span class="cuello"></span>
<span class="body"></span>
<span class="body3"></span>
<span class="legs"></span>
<span class="cola"></span>
</div>
</div>
CSS
body{
background:black;
}
.contenedor{
position:relative;
width:600px;
height:600px;
border-radius:100%;
background:#500468;
margin:231px auto;
border:9px solid #333;
}
.compu{
position:absolute;
width:261px;
height:192px;
background:#121212;
border:12px solid #745599;
border-radius:9px;
margin:112px 152px
}
.compu::before{
content:"";
display:block;
width:30px;
height:50px;
background:#745599;
margin:201px 121px
}
.compu::after{
content:"";
display:block;
width:121px;
height:30px;
border-radius:100%;
background:#745599;
margin:-212px 73px
}
.hueso{
position:absolute;
width:152px;
height:30px;
background:#0BD8F9;
margin:-380px 42px
}
.redon,.redon3{
position:absolute;
width:35px;
height:35px;
border-radius:100%;
background:#0BD8F9;
}
.redon{margin:-12px -3px;}
.redon3{margin:-12px 145px;}
.redon::before, .redon3::before{
content:"";
position:absolute;
width:35px;
height:35px;
border-radius:100%;
background:#0BD8F9;
margin:21px 0px
}
.head{
position:absolute;
width:90px;
height:85px;
border-radius:100%;
background:#C6C6C6;
margin:231px 255px;
animation:sube3 .9s alternate infinite;
-moz-animation:sube3 .9s alternate infinite;
-webkit-animation:sube3 .9s alternate infinite;
}
.cuello{
position:absolute;
border-bottom: 30px solid #C6C6C6;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
height: 0;
width: 40px;
margin:300px 267px
}
.body{
position:absolute;
display:block;
width: 90px;
height: 80px;
-webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
background:#C6C6C6;
margin:309px 254px;
animation:sube7 .9s alternate infinite;
-moz-animation:sube7 .9s alternate infinite;
-webkit-animation:sube7 .9s alternate infinite;
}
.body3{
position:absolute;
width:102px;
height:60px;
border-radius:100%;
background:#C6C6C6;
margin:350px 247px;
animation:sube7 .9s alternate infinite;
-moz-animation:sube7 .9s alternate infinite;
-webkit-animation:sube7 .9s alternate infinite;
}
.legs{
position:absolute;
width:60px;
height:25px;
border-radius:60px 0 0 60px;
background:#C6C6C6;
margin:390px 239px
}
.legs::before{
content:"";
position:absolute;
width:60px;
height:25px;
border-radius:0 60px 60px 0;
background:#C6C6C6;
margin:0px 57px
}
.orejas{
position:absolute;
width:25px;
height:121px;
border-radius:100%;
background:gray;
margin:14px -3px;
z-index:333;
}
.orejas::before{
content:"";
position:absolute;
width:25px;
height:121px;
border-radius:100%;
background:gray;
margin:0px 70px
}
.cola{
position:absolute;
width:21px;
height:112px;
border-radius:21px;
background:gray;
margin:390px 290px;
transform-origin:50% 0%;
-moz-transform-origin:50% 0%;
-webkit-transform-origin:50% 0%;
animation:sube9 .3s alternate infinite;
-moz-animation:sube9 .3s alternate infinite;
-webkit-animation:sube9 .3s alternate infinite;
}
.brazos{
position:absolute;
width:21px;
height:95px;
border-radius:21px;
background:#C6C6C6;
border-top:12px solid gray;
margin:241px 231px;
transform:rotate(-21deg);
-moz-transform:rotate(-21deg);
-webkit-transform:rotate(-21deg);
animation:sube .9s alternate infinite;
-moz-animation:sube .9s alternate infinite;
-webkit-animation:sube .9s alternate infinite;
}
.brazos::before{
content:"";
position:absolute;
width:21px;
height:95px;
border-radius:21px;
background:#C6C6C6;
border-top:12px solid gray;
margin:33px 107px;
transform:rotate(42deg);
-moz-transform:rotate(42deg);
-webkit-transform:rotate(42deg);
}
@keyframes sube{
0%{margin:241px 231px;}
100%{margin:212px 231px;}
}
@-moz-keyframes sube{
0%{margin:241px 231px;}
100%{margin:212px 231px;}
}
@-webkit-keyframes sube{
0%{margin:241px 231px;}
100%{margin:212px 231px;}
}
@keyframes sube3{
0%{ margin:231px 255px;}
100%{ margin:221px 255px;}
}
@-moz-keyframes sube3{
0%{ margin:231px 255px;}
100%{ margin:221px 255px;}
}
@-webkit-keyframes sube3{
0%{ margin:231px 255px;}
100%{ margin:221px 255px;}
}
@keyframes sube7 {
0%{transform:scale(1);
-moz-transform:scale(1);
-webkit-transform:scale(1);}
100%{transform:scale(.9);
-moz-transform:scale(.9);
-webkit-transform:scale(.9);}
}
@-moz-keyframes sube7 {
0%{transform:scale(1);
-moz-transform:scale(1);
-webkit-transform:scale(1);}
100%{transform:scale(.9);
-moz-transform:scale(.9);
-webkit-transform:scale(.9);}
}
@-webkit-keyframes sube7 {
0%{transform:scale(1);
-moz-transform:scale(1);
-webkit-transform:scale(1);}
100%{transform:scale(.9);
-moz-transform:scale(.9);
-webkit-transform:scale(.9);}
}
@keyframes sube9{
0%{ transform:rotate(-12deg);
-moz-transform:rotate(-12deg);
-webkit-transform:rotate(-12deg);}
100%{ transform:rotate(12deg);
-moz-transform:rotate(12deg);
-webkit-transform:rotate(12deg);}
}
