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