HTML
<div class="contenedor">
<div class="silla">
<span class="arco"></span>
<span class="rueda1"><span class="lineas"></span></span>
<span class="rueda2"><span class="lineas"></span></span>
<span class="rueda3"><span class="lineas"></span></span>
<div class="cat">
<div class="body"><span class="legs"></span><span class="cola"></span></div>
<div class="cara"><span class="ojos"></span><span class="hocico"></span></div>
</div>
</div>
</div>
CSS
body{
background:black;
}
.contenedor{
position:relative;
width:600px;
height:600px;
border-radius:100%;
background:#F75D76;
margin:231px auto;
border:9px solid gray;
}
.silla{
position:absolute;
width:162px;
height:132px;
background:#212121;
border-radius:21px;
margin:132px 55px;
animation:go 3s alternate infinite;
-moz-animation:go 3s alternate infinite;
-webkit-animation:go 3s alternate infinite;
}
.silla::before{
content:"";
display:block;
width:21px;
height:172px;
background:#333;
margin:132px 70px;}
.silla::after{
content:"";
display:block;
width:172px;
height:30px;
border-radius:12px;
background:#212121;
margin:-241px -7px
}
.arco{
position:absolute;
width:152px;
height:152px;
border-radius:100%;
border-top:12px solid #333;
margin:-172px 3px
}
.rueda1,.rueda2,.rueda3{
position:absolute;
width:35px;
height:35px;
border-radius:100%;
background:#121212;
animation:go3 3s alternate infinite;
-moz-animation:go3 3s alternate infinite;
-webkit-animation:go3 3s alternate infinite;
}
.rueda1{
margin:-132px 0px;
}
.rueda2{
margin:-142px 63px
}
.rueda3{
margin:-132px 125px
}
.lineas{
position:absolute;
width:7px;
height:35px;
background:#333;
margin:0 13px;
}
.cat{
position:absolute;
margin:0 0;
animation:go9 3s alternate infinite;
-moz-animation:go9 3s alternate infinite;
-webkit-animation:go9 3s alternate infinite;
}
.body{
position:absolute;
width:121px;
height:55px;
border-radius:90px 90px 0 0;
background:black;
margin:-295px 12px
}
.body::before{
content:"";
display:block;
width:70px;
height:21px;
border-radius: 0 12px 12px 0;
background:black;
margin:34px 70px
}
.cara{
position:absolute;
width:63px;
height:60px;
border-radius:100%;
background:black;
margin:-330px 73px;
border-bottom:1px solid #121212;
}
.cara::before{
content:"";
display:block;
width: 0;
height: 0;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
border-bottom: 30px solid black;
margin:-19px -5px;
transform:rotate(-30deg);
-moz-transform:rotate(-30deg);
-webkit-transform:rotate(-30deg);
}
.cara::after{
content:"";
display:block;
width: 0;
height: 0;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
border-bottom: 30px solid black;
transform:rotate(30deg);
-moz-transform:rotate(30deg);
-webkit-transform:rotate(30deg);
margin:-26px 47px
}
.ojos{
position:absolute;
width:9px;
height:9px;
border-radius:100%;
background:#008C66;
border:4px solid white;
margin:30px 10px
}
.ojos::before{
content:"";
position:absolute;
width:9px;
height:9px;
border-radius:100%;
background:#008C66;
border:4px solid white;
margin:-3px 22px;
}
.hocico{
position:absolute;
width: 0;
height: 0;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid #212121;
-moz-border-radius: 100px / 50px;
-webkit-border-radius: 100px / 50px;
border-radius: 100px / 50px;
margin:43px 25px
}
.hocico::before{
content:"";
display:block;
width:14px;
height:14px;
border-radius:100%;
background:#121212;
margin:5px -12px
}
.hocico::after{
content:"";
display:block;
width:14px;
height:14px;
border-radius:100%;
background:#121212;
margin:-19px 0px
}
.legs{
position:absolute;
width:30px;
height:16px;
border-radius:30px 30px 0 0;
border-top:3px solid #212121;
margin:-60px 9px
}
.legs::before{
content:"";
display:block;
width:40px;
height:16px;
border-radius:12px;
background:black;
border-right:3px solid #121212;
border-top:1px solid #121212;
margin:5px 16px
}
.cola{
position:absolute;
width:16px;
height:70px;
border-radius: 0 0 12px 12px;
background:black;
margin:-37px 0px;
animation:go7 3s alternate infinite;
-moz-animation:go7 3s alternate infinite;
-webkit-animation:go7 3s alternate infinite;
}
@keyframes go{
0%{ margin:132px 55px;}
100%{ margin:132px 370px;}
}
@-moz-keyframes go{
0%{ margin:132px 55px;}
100%{ margin:132px 370px;}
}
@-webkit-keyframes go {
0%{ margin:132px 55px;}
100%{ margin:132px 370px;}
}
@keyframes go3{
0%{
transform:rotate(0deg);
-moz-transform:rotate(0deg);
-webkit-transform:rotate(0deg);
}
100%{
transform:rotate(360deg);
-moz-transform:rotate(360deg);
-webkit-transform:rotate(360deg);
}
}
@-moz-keyframes go3{
0%{
transform:rotate(0deg);
-moz-transform:rotate(0deg);
-webkit-transform:rotate(0deg);
}
100%{
transform:rotate(360deg);
-moz-transform:rotate(360deg);
-webkit-transform:rotate(360deg);
}
}
@-webkit-keyframes go3{
0%{
transform:rotate(0deg);
-moz-transform:rotate(0deg);
-webkit-transform:rotate(0deg);
}
100%{
transform:rotate(360deg);
-moz-transform:rotate(360deg);
-webkit-transform:rotate(360deg);
}
}
@keyframes go7 {
0%{
transform:rotate(-6deg);
-moz-transform:rotate(-6deg);
-webkit-transform:rotate(-6deg);
margin:-37px 3px;
}
100%{
transform:rotate(6deg);
-moz-transform:rotate(6deg);
-webkit-transform:rotate(6deg);
}
}
@-moz-keyframes go7 {
0%{
transform:rotate(-6deg);
-moz-transform:rotate(-6deg);
-webkit-transform:rotate(-6deg);
margin:-37px 3px;
}
100%{
transform:rotate(6deg);
-moz-transform:rotate(6deg);
-webkit-transform:rotate(6deg);
}
}
@-webkit-keyframes go7 {
0%{
transform:rotate(-6deg);
-moz-transform:rotate(-6deg);
-webkit-transform:rotate(-6deg);
margin:-37px 3px;
}
100%{
transform:rotate(6deg);
-moz-transform:rotate(6deg);
-webkit-transform:rotate(6deg);
}
}
@keyframes go9 {
0%{ margin:0px -9px;}
100%{ margin:0px 9px;}
}
@-moz-keyframes go9 {
0%{ margin:0px -9px;}
100%{ margin:0px 9px;}
}
@-webkit-keyframes go9 {
0%{ margin:0px -9px;}
100%{ margin:0px 9px;}
}
