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)}
}
