Cat on the chair

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;} }
JAVASCRIPT
Expand for more options Login