HTML
<div class="container">
<div class="bike">
<div class="ruedas"><div class="ruedas7"></div></div>
<div class="ruedas3"><div class="ruedas9"></div></div>
<div class="ruedas12"></div>
<div class="ruedas21"></div>
<div class="ruedas30"></div>
<div class="ruedas33"></div>
</div>
<div class="stars">
<div class="star">
<span class="star3"></span>
<span class="star5"></span>
</div>
<div class="star6">
<span class="star3"></span>
<span class="star5"></span>
</div>
<div class="star7">
<span class="star3"></span>
<span class="star5"></span>
</div>
<div class="star8">
<span class="star3"></span>
<span class="star5"></span>
</div>
<div class="star9">
<span class="star3"></span>
<span class="star5"></span>
</div>
<div class="star12">
<span class="star3"></span>
<span class="star5"></span>
</div>
</div>
<div class="nubes"></div>
<div class="nubes3"></div>
<div class="base"></div>
</div>
CSS
body{
background:black;
}
.container{
position:relative;
width:400px;
height:300px;
background:#070211;
margin:291px auto;
overflow:hidden;
}
.bike{
position:absolute;
margin:65px 30px;
transform:scale(.9);
animation:sube 3s alternate infinite;
}
.ruedas,.ruedas3{
position:absolute;
width: 70px;
height:70px;
border-radius:100%;
background:#c93486;
border:5px solid #523163;
animation:rotar 3s linear infinite;
}
.ruedas{margin:152px 80px;}
.ruedas3{margin:152px 231px;}
.ruedas::before,.ruedas3::before{
content:"";
position:absolute;
width: 64px;
height:65px;
border-radius:100%;
background:#ed50a6;
margin:2px 5px;
}
.ruedas::after,.ruedas3::after{
content:"";
position:absolute;
width: 45px;
height: 50px;
border-radius:100%;
border-right:5px solid #eaeaea;
transform:rotate(33deg);
margin:12px 12px;
}
.ruedas7, .ruedas9{
position:absolute;
width:5px;
height:5px;
border-radius:100%;
border:7px solid #523163;
margin:25px 25px;
}
.ruedas12{
position:absolute;
width:5px;
height:90px;
background:#523163;
transform:rotate(21deg);
border-radius:3px;
margin:96px 135px
}
.ruedas12::before{
content:"";
position:absolute;
width:85px;
height:5px;
transform:rotate(-21deg);
background:#523163;
border-radius:3px;
margin:-17px 0
}
.ruedas12::after{
content:"";
position:absolute;
width:90px;
height:5px;
transform:rotate(-80deg);
background:#523163;
border-radius:5px;
margin:18px 33px
}
.ruedas21{
position:absolute;
width:5px;
height:121px;
background:#523163;
transform:rotate(-21deg);
border-radius:5px;
margin:70px 247px
}
.ruedas21::before{
content:"";
position:absolute;
width:77px;
height:5px;
transform:rotate(21deg);
background:#523163;
border-radius:3px;
margin:75px -142px
}
.ruedas21::after{
content:"";
position:absolute;
width:142px;
height:5px;
transform:rotate(85deg);
background:#523163;
border-radius:5px;
margin:40px -145px
}
.ruedas30{
position:absolute;
width:30px;
height:5px;
background:#523163;
transform:rotate(-21deg);
border-radius:5px;
margin:67px 225px
}
.ruedas33{
position:absolute;
width:35px;
height:5px;
background:#523163;
border-radius:5px;
margin:73px 121px
}
.ruedas33::before{
content:"";
position:absolute;
width:21px;
height:5px;
background:#523163;
transform:rotate(30deg);
border-radius:5px;
margin:-6px -17px
}
.ruedas33::after{
content:"";
position:absolute;
width:30px;
height:7px;
background:#523163;
border-radius:5px;
margin:125px 65px
}
.stars{
position:absolute;
margin:40px 40px;
transform:scale(.75)
}
.star, .star6, .star7, .star8, .star9, .star12{
position: absolute;
width: 24px;
height: 24px;
overflow:hidden;
}
.star{
background: #0085f9;
margin:70px 112px;
animation: glitter 4.5s linear 0s infinite normal;}
.star6{
background: #d0378c;
margin:65px 142px;
animation: glitter 3.5s linear 0s infinite normal;
}
.star8{
background: #604099;
margin:50px 172px;
animation: glitter 4.5s linear 0s infinite normal;}
.star7{
margin:55px 201px;
background: #0085f9;
animation: glitter 3.5s linear 0s infinite normal;
}
.star9{
margin:60px 231px;
background: #d0378c;
animation: glitter 3.5s linear 0s infinite normal;
}
.star12{
margin:50px 261px;
background: #604099;
animation: glitter 4.5s linear 0s infinite normal;
}
.star3,.star5{
position: absolute;
margin:0px 0px;
z-index:3333;
}
.star3:before ,
.star3:after ,
.star5:before ,
.star5:after{
content: "";
width: 24px;
height: 24px;
background: #070211;
border-radius: 50%;
position: absolute;
}
.star3:before {
top: -12px;
left: -12px;
}
.star3:after {
bottom: -12px;
left: 12px;
}
.star5:before {
top: 12px;
left: -12px;
}
.star5:after {
top: 12px;
left: 12px;
}
.base{
position:absolute;
width:212px;
height:7px;
background:#523163;
border-radius:5px;
margin:275px -50px;
animation:go 3s linear infinite;
}
.base::before{
content:"";
position:absolute;
width:70px;
height:7px;
background:#523163;
border-radius:5px;
margin:0 221px
}
.base::after{
content:"";
position:absolute;
width:330px;
height:7px;
background:#523163;
border-radius:5px;
margin:0 300px
}
.nubes,.nubes3{
position:absolute;
width: 90px;
height:12px;
border-radius:30px;
background:#436799;
}
.nubes{
margin: 12px 430px;
animation:go3 21s linear infinite;
}
.nubes3{
transform:scale(.7);
margin: 21px 570px;
animation:go7 21s linear infinite;
}
.nubes::before, .nubes3::before{
content:"";
position:absolute;
width: 70px;
height:12px;
border-radius:30px;
background:#436799;
margin: 12px 12px;
}
.nubes::after,.nubes3::after{
content:"";
position:absolute;
width: 60px;
height:12px;
border-radius:30px;
background:#436799;
}
.nubes::after{margin: 21px 30px;}
.nubes3::after{margin: 21px 0px;}
@keyframes glitter {
0% { transform: scale(0.6); opacity: 1; }
25% { transform: scale(0.5); opacity: 0; }
50% { transform: scale(0.6); opacity: 1; }
75% { transform: scale(0.5); opacity: 0; }
100% { transform: scale(0.6); opacity: 1; }
}
@keyframes rotar {
0%{transform:rotate(0deg)}
100%{transform:rotate(360deg)}
}
@keyframes go{
0%{transform:translateX(0px)}
100%{transform:translateX(-172px)}
}
@keyframes sube {
0%{transform:translateX(0px) scale(.9)}
50%{transform:translateX(-3px) scale(.9)}
}
@keyframes go3 {
0%{transform:translateX(0px)}
100%{transform:translateX(-670px)}
}
@keyframes go7 {
0%{transform:translateX(0px) scale(.7)}
100%{transform:translateX(-630px) scale(.7)}
}
