Koala´s climb up (Only CSS)

HTML
<div class="container"> <div class="grass"></div> <div class="body"></div> <div class="body3"></div> <div class="tronco"> <div class="koalas"> <div class="koala"> <div class="legs"> <div class="leg"></div> <div class="leg5"></div> <div class="leg3"></div> <div class="leg7"></div> </div> <div class="cabeza"> <div class="ojos"><div class="iris"></div></div> <div class="orejas"></div> <div class="orejas3"></div> </div> </div> </div> </div> <div class="sol"></div> <div class="nubes"></div> <div class="nubes3"></div> </div>
CSS
body{ background:black; } .container{ position:relative; width:800px; height:600px; background:lightblue; margin:201px auto; } .body{ position:absolute; width:93px; height:70px; border-radius:100%; background:#936663; margin:350px 348px; animation:sube3 12s linear infinite; } .body3{ position:absolute; width:85px; height:95px; border-radius:100%; background:#936663; margin:307px 353px; animation:sube3 12s linear infinite; } .tronco { position:absolute; width:90px; height:350px; background:rgb(109,16,2) ; margin:172px 350px; transform:scale(.9); z-index:333; border-radius: 100px / 50px; } .tronco:after { content: ''; position: absolute; left: 0px; top: 0px; width: 85px; height: 35px; background: #6B1C12; border-radius: 100%; margin:3px 3px; } .koalas{ position:absolute; transform:scale(.8); z-index:999; } .koala{ position:absolute; margin:75px 0px; animation:sube 12s linear infinite; } .cabeza{ position:absolute; width:112px; height:102px; border-radius:100%; background:#936663;; transform: rotate(45deg); margin:12px 40px; border-bottom:1px solid #d59494; z-index:333; animation:rotar 12s alternate infinite; } .ojos{ position:absolute; width:17px; height:17px; border-radius:100%; background:black; margin:45px 21px; animation:abre 3s alternate infinite; } .ojos::before{ content:""; display:block; width:17px; height:17px; border-radius:100%; background:black; margin:0px 50px; } .iris{ position:absolute; width:7px; height:7px; border-radius:100%; background:white; margin:-16px 3px } .iris::before{ content:""; display:block; width:7px; height:7px; border-radius:100%; background:white; margin:0px 53px; } .orejas{ position:absolute; width:65px; height:60px; border-radius:100%; background:#936663; margin:-12px -25px } .orejas::before{ content:""; display:block; width:65px; height:60px; border-radius:100%; background:#936663; margin:0px 95px } .orejas::after{ content:""; display:block; width:21px; height:35px; border-radius:100%; background:black; margin:0 70px } .orejas3{ position:absolute; width:35px; height:35px; border-radius:100%; background:#997C60; margin:0px -12px } .orejas3::before{ content:""; position:absolute; width:35px; height:35px; border-radius:100%; background:#997C60; margin:0px 99px } .orejas::before{ content:""; display:block; width:65px; height:60px; border-radius:100%; background:#936663; margin:0px 95px } .legs{ position:absolute; margin:0px -7px } .leg{ position:absolute; width:35px; height:30px; border-radius:100%; background:#997C60; border:7px solid #986b68;; margin: 90px -3px; animation:sube5 12s linear infinite; } .leg3{ position:absolute; width:35px; height:30px; border-radius:100%; background:#997C60; border:7px solid #986b68;; margin:102px 90px; animation:sube7 12s linear infinite; } .leg5{ position:absolute; width:35px; height:30px; border-radius:100%; background:#997C60; border:7px solid #986b68;; margin: 192px 3px; animation:sube5 12s linear infinite; } .leg7{ position:absolute; width:35px; height:30px; border-radius:100%; background:#997C60; border:7px solid #986b68;; margin: 201px 90px; animation:sube7 12s linear infinite; } .grass{ position:absolute; width:300px; height:45px; border-radius:30px; background:#009975; margin:465px 245px } .grass::before{ content:""; position:absolute; width:172px; height:21px; border-radius:30px; background:#009975; margin:30px -90px } .grass::after{ content:""; position:absolute; width:132px; height:21px; border-radius:30px; background:#009975; margin:-12px 251px } .sol{ position:absolute; width:102px; height:102px; border-radius:100%; background:#FCD12D; margin:30px 340px } .nubes,.nubes3{ position:absolute; height:21px; border-radius:12px; background:white; } .nubes{ width:112px; margin: 90px 251px } .nubes3{ width:121px; margin: 70px 430px } .nubes::before, .nubes3::before{ content:""; display:block; height:21px; border-radius:12px; background:white; } .nubes::before{ width:112px; margin: 21px 35px } .nubes3::before{ width:90px; margin: 21px -12px } @keyframes sube{ 0%{transform:translatey(0px);} 30%{transform:translatey(-10px);} 40%{transform:translatey(-20px);} 50%{transform:translatey(-30px);} 60%{transform:translatey(-40px);} 70%{transform:translatey(-50px);} 80%{transform:translatey(-60px);} 90%{transform:translatey(-70px);} 100%{transform:translatey(0px);} } @keyframes sube3{ 0%{transform:translatey(0px);} 30%{transform:translatey(-12px);} 40%{transform:translatey(-12px);} 50%{transform:translatey(-21px);} 60%{transform:translatey(-21px);} 70%{transform:translatey(-40px);} 80%{transform:translatey(-40px);} 90%{transform:translatey(-50px);} 100%{transform:translatey(0px);} } @keyframes sube5{ 0%{transform:translatey(0px);} 30%{transform:translatey(-12px);} 40%{transform:translatey(0px);} 50%{transform:translatey(-12px);} 60%{transform:translatey(0px);} 70%{transform:translatey(-12px);} 80%{transform:translatey(0px);} 90%{transform:translatey(-12px);} 100%{transform:translatey(0px);} } @keyframes sube7 { 0%{transform:translatey(-12px);} 30%{transform:translatey(0px);} 40%{transform:translatey(-12px);} 50%{transform:translatey(0px);} 60%{transform:translatey(-12px);} 70%{transform:translatey(0px);} 80%{transform:translatey(-12px);} 90%{transform:translatey(0px);} 100%{transform:translatey(-12px);} } @keyframes rotar{ 0%{transform:rotate(-12deg)} 50%{transform:rotate(0deg)} 75%{transform:rotate(12deg)} 100%{transform:rotate(0deg)} } @keyframes abre{ 0%,25%{opacity:1} 35%{opacity: 0} 50%{opacity:1;} 100%{opacity:1} }
JAVASCRIPT
Expand for more options Login