Bike in night

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