Motorized

HTML
<div class="container"> <div class="girl"> <div class="cuello"></div> <div class="hair"></div> <div class="cara"> <div class="glases"> <div class="l"></div></div> <div class="boca"></div> </div> <div class="brazo3"></div> <div class="body"> <div class="brazo"></div> </div> </div> <div class="cars"> <div class="car"></div> <div class="car7"></div> <div class="car3"></div> <div class="rueda"></div> <div class="rueda3"></div> </div> </div>
CSS
body{ background:black; } .container{ position:relative; width:800px; height:600px; background-image: linear-gradient(to top, #436799 50%, #9bcbff 50%); margin:90px auto; } .girl{ position:absolute; margin:102px 321px; transform:scale(.8); animation:subebaja3 3s alternate infinite; } .hair{ position:absolute; width:192px; height:70px; border-radius: 50px; background:#e2a414; margin:90px 90px; transition:all .3s easy-in-out; animation:go .9s alternate infinite; } .cara{ position:absolute; width:75px; height:75px; border-radius:100%; background:#e2a414; margin:90px 85px } .cara::before{ content:""; position:absolute; width:55px; height:55px; border-radius:100%; background:#f2d198; margin:21px 12px; } .cara::after{ content:""; position:absolute; width:57px; height:25px; border-radius:55px 55px 0 0; background:#e2a414; margin:12px 9PX } .glases{ position:absolute; width:21px; height:21px; border-radius:100%; background:#333; margin:40px 16px } .glases::before{ content:""; position:absolute; width:21px; height:21px; border-radius:100%; background:#333; margin:0px 25px } .glases::after{ content:""; position:absolute; width:12px; height:6px; border-radius:12px 12px 0 0; border-top:3px solid #333; margin:9px 17px } .boca{ position:absolute; width:10px; height:5px; border-radius:0 0 12px 12px; background:white; margin:63px 34px } .l{ position:absolute; width:3px; height:12px; background:#ddd; border-radius:3px; transform:rotate(12deg); margin:3px 5px; } .l::before{ content:""; position:absolute; width:3px; height:12px; background:#ddd; border-radius:3px; transform:rotate(0deg); margin:-5px 30px; } .cuello{ position:absolute; border-bottom: 16px solid #f2d198; border-left: 3px solid transparent; border-right: 3px solid transparent; height: 0; width: 7px; margin:162px 116px } .body{ position:absolute; border-top: 60px solid #0676d8; border-left: 9px solid transparent; border-right: 9px solid transparent; height: 0; width: 30px; margin:182px 96px } .body::before{ content:""; position:absolute; width:52px; height:12px; border-radius: 6px; background:#f2d198; margin:-64px -12px } .brazo, .brazo3{ position:absolute; width:12px; height:70px; border-radius:12px; background:#f2d198; transform:rotate(45deg); } .brazo{ margin:-70px 7px; animation:b1 3s alternate infinite; } .brazo3{ margin:172px 70px; animation:b2 3s alternate infinite; } .cars{ position:absolute; margin:-21px 30px; animation:subebaja 3s alternate infinite; } .car{ position:absolute; width:112px; height:90px; background:#c60f49; border-radius:1200px 0px 300px 0px; margin:312px 225px; } .car::before{ content:""; position:absolute; width:9px; height:80px; background:#c60f49; border-right:3px solid #900b4b; border-radius:12px; transform:rotate(21deg); margin:-70px 97px } .car::after{ content:""; position:absolute; width:9px; height:50px; background:#c60f49; border-right:3px solid #900b4b; border-radius:12px; transform:rotate(21deg); margin:-30px 205px } .car3{ position:absolute; width: 121px; height: 107px; background: #c60f49; border-radius: 50% / 10%; border:3px solid #900b4b; margin:303px 312px } .car3:before { content: ''; position: absolute; top: 10%; bottom: 10%; right: -5%; left: -5%; background: inherit; border:3px solid #900b4b; border-radius: 5% / 50%; } .car7{ position:absolute; width:121px; height:105px; background:#c60f49; border-radius:0px 4000px 500px 300px; margin:309px 406px; } .car7::before{ content:""; position:absolute; width:321px; height:21px; border-radius:21px; background:#900b4b; margin:90px -192px } .rueda,.rueda3{ position:absolute; width:40px; height:40px; border-radius:100%; border:21px solid #333; background:#ddd; animation:rotar .9s linear infinite; } .rueda::before,.rueda3::before{ content:""; position:absolute; width:43px; height:3px; background:#333; margin:19px -3px } .rueda::after,.rueda3::after{ content:""; position:absolute; width:3px; height:43px; background:#333; margin:0px 18px } .rueda{margin:370px 251px;} .rueda3{margin:370px 421px;} @keyframes go{ 0%{width:192px; transform:translateY(0)} 50%{width:152px; transform:translateY(-3px)} 70%{width:172px;transform:translateY(0)} 100%{width:192px;transform:translateY(-3px)} } @keyframes rotar{ 0%{transform:rotate(0deg) } 100%{transform:rotate(360deg)} } @keyframes b1{ 0%{transform:translateY(0px) rotate(45deg);} 100%{transform:translateY(-3px) rotate(45deg);} } @keyframes b2{ 0%{transform:translateY(0px) rotate(45deg);} 100%{transform:translateY(3px) rotate(45deg);} } @keyframes subebaja{ 0%{transform:translateY(0)} 100%{transform:translateY(-3px)} } @keyframes subebaja3{ 0%{transform:translateY(0) scale(.8)} 100%{transform:translateY(3px) scale(.8)} }
JAVASCRIPT
Expand for more options Login