Created
August 18, 2020 16:17
-
-
Save Humble23/2767b6df9a3bbc3c126c035487df039f to your computer and use it in GitHub Desktop.
JS Bin // source https://jsbin.com/fagopol
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <title>JS Bin</title> | |
| <script src="https://code.jquery.com/jquery-3.1.0.js"></script> | |
| <style id="jsbin-css"> | |
| * { | |
| margin: 0px; | |
| padding: 0px; | |
| border: 0; | |
| } | |
| body { | |
| background: #000; | |
| overflow: hidden; | |
| } | |
| .astronaut { | |
| position: absolute; | |
| z-index: 9999; | |
| top: 60%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| animation: .08s shake linear alternate infinite; | |
| } | |
| .astronaut .head { | |
| position: relative; | |
| z-index: 100; | |
| border-radius: 10px solid #000; | |
| background: #fff; | |
| border: 3px solid #000; | |
| width: 70px; | |
| height: 70px; | |
| border-radius: 50%; | |
| } | |
| .antenna { | |
| position: absolute; | |
| top: -6px; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| width: 5px; | |
| height: 10px; | |
| background: #333; | |
| } | |
| .antenna > .top { | |
| position: absolute; | |
| top: -14px; | |
| left: -4px; | |
| transform: translate(-0px, 50%); | |
| width: 13px; | |
| height: 13px; | |
| background: #333; | |
| border-radius: 50%; | |
| } | |
| .antenna > .top > .waves { | |
| position: absolute; | |
| top: 0px; | |
| left: -2px; | |
| } | |
| .antenna > .top > .waves > .wave { | |
| position: absolute; | |
| width: 21px; | |
| height: 30px; | |
| border: 3px solid transparent; | |
| border-top: 3px solid #333; | |
| border-radius: 50%; | |
| animation: 1s fade linear infinite; | |
| } | |
| .antenna > .top > .waves > .wave:nth-child(1) { | |
| top: -6px; | |
| left: -5px; | |
| animation-delay: 0.2s; | |
| } | |
| .antenna > .top > .waves > .wave:nth-child(2) { | |
| top: -11px; | |
| left: -7px; | |
| width: 24px; | |
| animation-delay: 0.5s; | |
| } | |
| .astronaut .head .lens { | |
| position: absolute; | |
| width: 101%; | |
| height: 60%; | |
| top: 27%; | |
| border: 3px solid #000; | |
| box-sizing: border-box; | |
| border-radius: 10px 10px 50% 50%; | |
| left: 0px; | |
| background: #729496; | |
| } | |
| .astronaut .body { | |
| display: flex; | |
| z-index: 1; | |
| height: 100px; | |
| position: absolute; | |
| top: 45px; | |
| left: 2%; | |
| } | |
| /* bag */ | |
| .astronaut .body::before { | |
| content: ""; | |
| position: absolute; | |
| background: #729496; | |
| z-index: -1; | |
| border: 3px solid #000; | |
| height: 50px; | |
| border-radius: 25px 25px 0px 0px; | |
| width: calc(100% + 20px); | |
| top: -33px; | |
| left: calc(-15% + -1px); | |
| } | |
| .astronaut .body > .left-side { | |
| background: #fff; | |
| border: 3px solid #000; | |
| border-right: none; | |
| height: 100%; | |
| border-radius: 0px 0px 60px 60px; | |
| width: 30px; | |
| } | |
| .astronaut .body > .right-side { | |
| background: #fff; | |
| height: 100%; | |
| border: 3px solid #000; | |
| border-radius: 0px 0px 60px 60px; | |
| width: 30px; | |
| } | |
| .astronaut .body > .left-side .arm { | |
| position: absolute; | |
| top: 0px; | |
| left: -25px; | |
| border: 4px solid #000; | |
| border-right: none; | |
| background: #fff; | |
| height: 60px; | |
| border-radius: 30px 0px 0px 20px; | |
| width: 20px; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: flex-end; | |
| } | |
| .left-side > .arm > .hand { | |
| border-radius: 0px 0px 0px 10px; | |
| width: calc(100% + 1px); | |
| background: #729496; | |
| transform: translate(-1px); | |
| border-top: 3px solid #000; | |
| height: 16px; | |
| } | |
| .astronaut .body > .left-side .arm::after { | |
| content: ""; | |
| position: absolute; | |
| top: -1px; | |
| border-radius: 4px 0px 0px 0px; | |
| right: -6px; | |
| width: 8px; | |
| height: 20px; | |
| background: #fff; | |
| } | |
| .astronaut .body > .right-side::after { | |
| content: ""; | |
| position: absolute; | |
| left: 34%; | |
| width: 32%; | |
| height: 10px; | |
| border-bottom: 3px solid #000; | |
| background: #fff; | |
| bottom: 30px; | |
| } | |
| .astronaut .body > .right-side .arm { | |
| position: absolute; | |
| top: 0px; | |
| right: -25px; | |
| border: 4px solid #000; | |
| border-left: none; | |
| background: #fff; | |
| height: 60px; | |
| border-radius: 0px 30px 20px 0px; | |
| width: 20px; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: flex-end; | |
| } | |
| .astronaut .body > .right-side .arm::after { | |
| content: ""; | |
| position: absolute; | |
| top: -1px; | |
| border-radius: 0px 6px 0px 0px; | |
| left: -6px; | |
| width: 8px; | |
| height: 20px; | |
| background: #fff; | |
| } | |
| .right-side > .arm > .hand { | |
| border-radius: 0px 0px 10px 0px; | |
| width: inherit; | |
| background: #729496; | |
| border-top: 3px solid #000; | |
| height: 16px; | |
| } | |
| .trail .colors { | |
| display: flex; | |
| width: calc(100% - 5px); | |
| height: 200px; | |
| background: #fff; | |
| } | |
| .trail .color { | |
| height: 100%; | |
| flex-grow: 1; | |
| } | |
| .trail .color:nth-child(1) { | |
| background: #C65430; | |
| } | |
| .trail .color:nth-child(2) { | |
| background: #EDB641; | |
| } | |
| .trail .color:nth-child(3) { | |
| background: #71BE93; | |
| } | |
| .trail .color:nth-child(4) { | |
| background: #5A95AD; | |
| } | |
| .trail .color:nth-child(5) { | |
| background: #726DA7; | |
| } | |
| .trail { | |
| position: relative; | |
| } | |
| .trail .propulsion { | |
| position: absolute; | |
| bottom: 20px; | |
| } | |
| .trail .propulsion .exp { | |
| position: absolute; | |
| background: #C65430; | |
| border-radius: 50%; | |
| width: 40px; | |
| height: 40px; | |
| animation: 0.4s altersize linear alternate infinite; | |
| } | |
| .trail .propulsion .exp:nth-child(1) { | |
| top: -6px; | |
| left: -20px; | |
| width: 50px; | |
| height: 50px; | |
| background: #C65430; | |
| animation-delay: .3s; | |
| } | |
| .trail .propulsion .exp:nth-child(2) { | |
| top: -17px; | |
| left: 0px; | |
| background: #EDB641; | |
| animation-delay: .5s; | |
| } | |
| .trail .propulsion .exp:nth-child(3) { | |
| top: 2px; | |
| left: 15px; | |
| width: 60px; | |
| height: 60px; | |
| background: #71BE93; | |
| animation-delay: .2s; | |
| } | |
| .trail .propulsion .exp:nth-child(4) { | |
| top: -6px; | |
| left: 30px; | |
| background: #5A95AD; | |
| animation-delay: .6s; | |
| } | |
| .trail .propulsion .exp:nth-child(5) { | |
| top: 10px; | |
| left: 45px; | |
| background: #726DA7; | |
| z-index: 3; | |
| animation-delay: .3s; | |
| } | |
| .trail .propulsion .exp:nth-child(6) { | |
| top: -5px; | |
| z-index: 1; | |
| left: 53px; | |
| background: #EDB641; | |
| animation-delay: .58s; | |
| } | |
| .trail .propulsion .exp:nth-child(7) { | |
| top: 10px; | |
| z-index: 1; | |
| background: #5A95AD; | |
| animation-delay: .45s; | |
| } | |
| @keyframes fade { | |
| from { | |
| opacity: 1; | |
| } | |
| to { | |
| opacity: 0; | |
| } | |
| } | |
| @keyframes shake { | |
| from { | |
| transform: translate(-50%, -50%) translate(-2px); | |
| } | |
| to { | |
| transform: translate(-50%, -50%) translate(2px); | |
| } | |
| } | |
| @keyframes altersize { | |
| from { | |
| transform: scale(0.5); | |
| } | |
| to { | |
| transform: scale(1); | |
| } | |
| } | |
| .stars{ | |
| z-index: -9999; | |
| } | |
| .star { | |
| position: absolute; | |
| width: 3px; | |
| height: 3px; | |
| background: #fff; | |
| border-radius: 50%; | |
| animation: 2s fall linear infinite; | |
| } | |
| @keyframes fall { | |
| from { | |
| transform: translate(0); | |
| } | |
| to { | |
| transform: translate(0, 700px); | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="astronaut"> | |
| <div class="head"> | |
| <div class="antenna"> | |
| <div class="top"> | |
| <div class="waves"> | |
| <div class="wave"></div> | |
| <div class="wave"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="lens"></div> | |
| </div> | |
| <div class="body"> | |
| <div class="left-side"> | |
| <div class="arm"> | |
| <div class="hand"></div> | |
| </div> | |
| </div> | |
| <div class="right-side"> | |
| <div class="arm"> | |
| <div class="hand"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="trail"> | |
| <div class="colors"> | |
| <div class="color"></div> | |
| <div class="color"></div> | |
| <div class="color"></div> | |
| <div class="color"></div> | |
| <div class="color"></div> | |
| </div> | |
| <div class="propulsion"> | |
| <div class="exp"></div> | |
| <div class="exp"></div> | |
| <div class="exp"></div> | |
| <div class="exp"></div> | |
| <div class="exp"></div> | |
| <div class="exp"></div> | |
| <div class="exp"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="stars"> | |
| </div> | |
| <script id="jsbin-javascript"> | |
| let stars = 100; | |
| function refreshStar(item) { | |
| let newX = Math.floor(Math.random() * (window.innerWidth + 1)); | |
| let topStart = Math.floor(Math.random() * (window.innerHeight + 1)); | |
| $(item).css('left', `${newX}px`) | |
| .css('top', `${topStart}px`); | |
| } | |
| function addStar() { | |
| let newX = Math.floor(Math.random() * (window.innerWidth + 1)); | |
| let star = document.createElement('span'); | |
| star.classList.add('star'); | |
| star.style.left = newX + 'px'; | |
| $('.stars').append(star); | |
| setTimeout(() => { | |
| star.remove(); | |
| }, 10000); | |
| } | |
| function addStars() { | |
| for (let i = 0; i < stars; i++) { | |
| addStar(); | |
| } | |
| } | |
| $(document).ready(function() { | |
| addStars(); | |
| $('.star').each(function(index, item) { | |
| refreshStar(item); | |
| }) | |
| }) | |
| setInterval(() => { | |
| addStar(); | |
| }, 40) | |
| </script> | |
| <script id="jsbin-source-css" type="text/css">* { | |
| margin: 0px; | |
| padding: 0px; | |
| border: 0; | |
| } | |
| body { | |
| background: #000; | |
| overflow: hidden; | |
| } | |
| .astronaut { | |
| position: absolute; | |
| z-index: 9999; | |
| top: 60%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| animation: .08s shake linear alternate infinite; | |
| } | |
| .astronaut .head { | |
| position: relative; | |
| z-index: 100; | |
| border-radius: 10px solid #000; | |
| background: #fff; | |
| border: 3px solid #000; | |
| width: 70px; | |
| height: 70px; | |
| border-radius: 50%; | |
| } | |
| .antenna { | |
| position: absolute; | |
| top: -6px; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| width: 5px; | |
| height: 10px; | |
| background: #333; | |
| } | |
| .antenna > .top { | |
| position: absolute; | |
| top: -14px; | |
| left: -4px; | |
| transform: translate(-0px, 50%); | |
| width: 13px; | |
| height: 13px; | |
| background: #333; | |
| border-radius: 50%; | |
| } | |
| .antenna > .top > .waves { | |
| position: absolute; | |
| top: 0px; | |
| left: -2px; | |
| } | |
| .antenna > .top > .waves > .wave { | |
| position: absolute; | |
| width: 21px; | |
| height: 30px; | |
| border: 3px solid transparent; | |
| border-top: 3px solid #333; | |
| border-radius: 50%; | |
| animation: 1s fade linear infinite; | |
| } | |
| .antenna > .top > .waves > .wave:nth-child(1) { | |
| top: -6px; | |
| left: -5px; | |
| animation-delay: 0.2s; | |
| } | |
| .antenna > .top > .waves > .wave:nth-child(2) { | |
| top: -11px; | |
| left: -7px; | |
| width: 24px; | |
| animation-delay: 0.5s; | |
| } | |
| .astronaut .head .lens { | |
| position: absolute; | |
| width: 101%; | |
| height: 60%; | |
| top: 27%; | |
| border: 3px solid #000; | |
| box-sizing: border-box; | |
| border-radius: 10px 10px 50% 50%; | |
| left: 0px; | |
| background: #729496; | |
| } | |
| .astronaut .body { | |
| display: flex; | |
| z-index: 1; | |
| height: 100px; | |
| position: absolute; | |
| top: 45px; | |
| left: 2%; | |
| } | |
| /* bag */ | |
| .astronaut .body::before { | |
| content: ""; | |
| position: absolute; | |
| background: #729496; | |
| z-index: -1; | |
| border: 3px solid #000; | |
| height: 50px; | |
| border-radius: 25px 25px 0px 0px; | |
| width: calc(100% + 20px); | |
| top: -33px; | |
| left: calc(-15% + -1px); | |
| } | |
| .astronaut .body > .left-side { | |
| background: #fff; | |
| border: 3px solid #000; | |
| border-right: none; | |
| height: 100%; | |
| border-radius: 0px 0px 60px 60px; | |
| width: 30px; | |
| } | |
| .astronaut .body > .right-side { | |
| background: #fff; | |
| height: 100%; | |
| border: 3px solid #000; | |
| border-radius: 0px 0px 60px 60px; | |
| width: 30px; | |
| } | |
| .astronaut .body > .left-side .arm { | |
| position: absolute; | |
| top: 0px; | |
| left: -25px; | |
| border: 4px solid #000; | |
| border-right: none; | |
| background: #fff; | |
| height: 60px; | |
| border-radius: 30px 0px 0px 20px; | |
| width: 20px; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: flex-end; | |
| } | |
| .left-side > .arm > .hand { | |
| border-radius: 0px 0px 0px 10px; | |
| width: calc(100% + 1px); | |
| background: #729496; | |
| transform: translate(-1px); | |
| border-top: 3px solid #000; | |
| height: 16px; | |
| } | |
| .astronaut .body > .left-side .arm::after { | |
| content: ""; | |
| position: absolute; | |
| top: -1px; | |
| border-radius: 4px 0px 0px 0px; | |
| right: -6px; | |
| width: 8px; | |
| height: 20px; | |
| background: #fff; | |
| } | |
| .astronaut .body > .right-side::after { | |
| content: ""; | |
| position: absolute; | |
| left: 34%; | |
| width: 32%; | |
| height: 10px; | |
| border-bottom: 3px solid #000; | |
| background: #fff; | |
| bottom: 30px; | |
| } | |
| .astronaut .body > .right-side .arm { | |
| position: absolute; | |
| top: 0px; | |
| right: -25px; | |
| border: 4px solid #000; | |
| border-left: none; | |
| background: #fff; | |
| height: 60px; | |
| border-radius: 0px 30px 20px 0px; | |
| width: 20px; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: flex-end; | |
| } | |
| .astronaut .body > .right-side .arm::after { | |
| content: ""; | |
| position: absolute; | |
| top: -1px; | |
| border-radius: 0px 6px 0px 0px; | |
| left: -6px; | |
| width: 8px; | |
| height: 20px; | |
| background: #fff; | |
| } | |
| .right-side > .arm > .hand { | |
| border-radius: 0px 0px 10px 0px; | |
| width: inherit; | |
| background: #729496; | |
| border-top: 3px solid #000; | |
| height: 16px; | |
| } | |
| .trail .colors { | |
| display: flex; | |
| width: calc(100% - 5px); | |
| height: 200px; | |
| background: #fff; | |
| } | |
| .trail .color { | |
| height: 100%; | |
| flex-grow: 1; | |
| } | |
| .trail .color:nth-child(1) { | |
| background: #C65430; | |
| } | |
| .trail .color:nth-child(2) { | |
| background: #EDB641; | |
| } | |
| .trail .color:nth-child(3) { | |
| background: #71BE93; | |
| } | |
| .trail .color:nth-child(4) { | |
| background: #5A95AD; | |
| } | |
| .trail .color:nth-child(5) { | |
| background: #726DA7; | |
| } | |
| .trail { | |
| position: relative; | |
| } | |
| .trail .propulsion { | |
| position: absolute; | |
| bottom: 20px; | |
| } | |
| .trail .propulsion .exp { | |
| position: absolute; | |
| background: #C65430; | |
| border-radius: 50%; | |
| width: 40px; | |
| height: 40px; | |
| animation: 0.4s altersize linear alternate infinite; | |
| } | |
| .trail .propulsion .exp:nth-child(1) { | |
| top: -6px; | |
| left: -20px; | |
| width: 50px; | |
| height: 50px; | |
| background: #C65430; | |
| animation-delay: .3s; | |
| } | |
| .trail .propulsion .exp:nth-child(2) { | |
| top: -17px; | |
| left: 0px; | |
| background: #EDB641; | |
| animation-delay: .5s; | |
| } | |
| .trail .propulsion .exp:nth-child(3) { | |
| top: 2px; | |
| left: 15px; | |
| width: 60px; | |
| height: 60px; | |
| background: #71BE93; | |
| animation-delay: .2s; | |
| } | |
| .trail .propulsion .exp:nth-child(4) { | |
| top: -6px; | |
| left: 30px; | |
| background: #5A95AD; | |
| animation-delay: .6s; | |
| } | |
| .trail .propulsion .exp:nth-child(5) { | |
| top: 10px; | |
| left: 45px; | |
| background: #726DA7; | |
| z-index: 3; | |
| animation-delay: .3s; | |
| } | |
| .trail .propulsion .exp:nth-child(6) { | |
| top: -5px; | |
| z-index: 1; | |
| left: 53px; | |
| background: #EDB641; | |
| animation-delay: .58s; | |
| } | |
| .trail .propulsion .exp:nth-child(7) { | |
| top: 10px; | |
| z-index: 1; | |
| background: #5A95AD; | |
| animation-delay: .45s; | |
| } | |
| @keyframes fade { | |
| from { | |
| opacity: 1; | |
| } | |
| to { | |
| opacity: 0; | |
| } | |
| } | |
| @keyframes shake { | |
| from { | |
| transform: translate(-50%, -50%) translate(-2px); | |
| } | |
| to { | |
| transform: translate(-50%, -50%) translate(2px); | |
| } | |
| } | |
| @keyframes altersize { | |
| from { | |
| transform: scale(0.5); | |
| } | |
| to { | |
| transform: scale(1); | |
| } | |
| } | |
| .stars{ | |
| z-index: -9999; | |
| } | |
| .star { | |
| position: absolute; | |
| width: 3px; | |
| height: 3px; | |
| background: #fff; | |
| border-radius: 50%; | |
| animation: 2s fall linear infinite; | |
| } | |
| @keyframes fall { | |
| from { | |
| transform: translate(0); | |
| } | |
| to { | |
| transform: translate(0, 700px); | |
| } | |
| } | |
| </script> | |
| <script id="jsbin-source-javascript" type="text/javascript">let stars = 100; | |
| function refreshStar(item) { | |
| let newX = Math.floor(Math.random() * (window.innerWidth + 1)); | |
| let topStart = Math.floor(Math.random() * (window.innerHeight + 1)); | |
| $(item).css('left', `${newX}px`) | |
| .css('top', `${topStart}px`); | |
| } | |
| function addStar() { | |
| let newX = Math.floor(Math.random() * (window.innerWidth + 1)); | |
| let star = document.createElement('span'); | |
| star.classList.add('star'); | |
| star.style.left = newX + 'px'; | |
| $('.stars').append(star); | |
| setTimeout(() => { | |
| star.remove(); | |
| }, 10000); | |
| } | |
| function addStars() { | |
| for (let i = 0; i < stars; i++) { | |
| addStar(); | |
| } | |
| } | |
| $(document).ready(function() { | |
| addStars(); | |
| $('.star').each(function(index, item) { | |
| refreshStar(item); | |
| }) | |
| }) | |
| setInterval(() => { | |
| addStar(); | |
| }, 40)</script></body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| * { | |
| margin: 0px; | |
| padding: 0px; | |
| border: 0; | |
| } | |
| body { | |
| background: #000; | |
| overflow: hidden; | |
| } | |
| .astronaut { | |
| position: absolute; | |
| z-index: 9999; | |
| top: 60%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| animation: .08s shake linear alternate infinite; | |
| } | |
| .astronaut .head { | |
| position: relative; | |
| z-index: 100; | |
| border-radius: 10px solid #000; | |
| background: #fff; | |
| border: 3px solid #000; | |
| width: 70px; | |
| height: 70px; | |
| border-radius: 50%; | |
| } | |
| .antenna { | |
| position: absolute; | |
| top: -6px; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| width: 5px; | |
| height: 10px; | |
| background: #333; | |
| } | |
| .antenna > .top { | |
| position: absolute; | |
| top: -14px; | |
| left: -4px; | |
| transform: translate(-0px, 50%); | |
| width: 13px; | |
| height: 13px; | |
| background: #333; | |
| border-radius: 50%; | |
| } | |
| .antenna > .top > .waves { | |
| position: absolute; | |
| top: 0px; | |
| left: -2px; | |
| } | |
| .antenna > .top > .waves > .wave { | |
| position: absolute; | |
| width: 21px; | |
| height: 30px; | |
| border: 3px solid transparent; | |
| border-top: 3px solid #333; | |
| border-radius: 50%; | |
| animation: 1s fade linear infinite; | |
| } | |
| .antenna > .top > .waves > .wave:nth-child(1) { | |
| top: -6px; | |
| left: -5px; | |
| animation-delay: 0.2s; | |
| } | |
| .antenna > .top > .waves > .wave:nth-child(2) { | |
| top: -11px; | |
| left: -7px; | |
| width: 24px; | |
| animation-delay: 0.5s; | |
| } | |
| .astronaut .head .lens { | |
| position: absolute; | |
| width: 101%; | |
| height: 60%; | |
| top: 27%; | |
| border: 3px solid #000; | |
| box-sizing: border-box; | |
| border-radius: 10px 10px 50% 50%; | |
| left: 0px; | |
| background: #729496; | |
| } | |
| .astronaut .body { | |
| display: flex; | |
| z-index: 1; | |
| height: 100px; | |
| position: absolute; | |
| top: 45px; | |
| left: 2%; | |
| } | |
| /* bag */ | |
| .astronaut .body::before { | |
| content: ""; | |
| position: absolute; | |
| background: #729496; | |
| z-index: -1; | |
| border: 3px solid #000; | |
| height: 50px; | |
| border-radius: 25px 25px 0px 0px; | |
| width: calc(100% + 20px); | |
| top: -33px; | |
| left: calc(-15% + -1px); | |
| } | |
| .astronaut .body > .left-side { | |
| background: #fff; | |
| border: 3px solid #000; | |
| border-right: none; | |
| height: 100%; | |
| border-radius: 0px 0px 60px 60px; | |
| width: 30px; | |
| } | |
| .astronaut .body > .right-side { | |
| background: #fff; | |
| height: 100%; | |
| border: 3px solid #000; | |
| border-radius: 0px 0px 60px 60px; | |
| width: 30px; | |
| } | |
| .astronaut .body > .left-side .arm { | |
| position: absolute; | |
| top: 0px; | |
| left: -25px; | |
| border: 4px solid #000; | |
| border-right: none; | |
| background: #fff; | |
| height: 60px; | |
| border-radius: 30px 0px 0px 20px; | |
| width: 20px; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: flex-end; | |
| } | |
| .left-side > .arm > .hand { | |
| border-radius: 0px 0px 0px 10px; | |
| width: calc(100% + 1px); | |
| background: #729496; | |
| transform: translate(-1px); | |
| border-top: 3px solid #000; | |
| height: 16px; | |
| } | |
| .astronaut .body > .left-side .arm::after { | |
| content: ""; | |
| position: absolute; | |
| top: -1px; | |
| border-radius: 4px 0px 0px 0px; | |
| right: -6px; | |
| width: 8px; | |
| height: 20px; | |
| background: #fff; | |
| } | |
| .astronaut .body > .right-side::after { | |
| content: ""; | |
| position: absolute; | |
| left: 34%; | |
| width: 32%; | |
| height: 10px; | |
| border-bottom: 3px solid #000; | |
| background: #fff; | |
| bottom: 30px; | |
| } | |
| .astronaut .body > .right-side .arm { | |
| position: absolute; | |
| top: 0px; | |
| right: -25px; | |
| border: 4px solid #000; | |
| border-left: none; | |
| background: #fff; | |
| height: 60px; | |
| border-radius: 0px 30px 20px 0px; | |
| width: 20px; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: flex-end; | |
| } | |
| .astronaut .body > .right-side .arm::after { | |
| content: ""; | |
| position: absolute; | |
| top: -1px; | |
| border-radius: 0px 6px 0px 0px; | |
| left: -6px; | |
| width: 8px; | |
| height: 20px; | |
| background: #fff; | |
| } | |
| .right-side > .arm > .hand { | |
| border-radius: 0px 0px 10px 0px; | |
| width: inherit; | |
| background: #729496; | |
| border-top: 3px solid #000; | |
| height: 16px; | |
| } | |
| .trail .colors { | |
| display: flex; | |
| width: calc(100% - 5px); | |
| height: 200px; | |
| background: #fff; | |
| } | |
| .trail .color { | |
| height: 100%; | |
| flex-grow: 1; | |
| } | |
| .trail .color:nth-child(1) { | |
| background: #C65430; | |
| } | |
| .trail .color:nth-child(2) { | |
| background: #EDB641; | |
| } | |
| .trail .color:nth-child(3) { | |
| background: #71BE93; | |
| } | |
| .trail .color:nth-child(4) { | |
| background: #5A95AD; | |
| } | |
| .trail .color:nth-child(5) { | |
| background: #726DA7; | |
| } | |
| .trail { | |
| position: relative; | |
| } | |
| .trail .propulsion { | |
| position: absolute; | |
| bottom: 20px; | |
| } | |
| .trail .propulsion .exp { | |
| position: absolute; | |
| background: #C65430; | |
| border-radius: 50%; | |
| width: 40px; | |
| height: 40px; | |
| animation: 0.4s altersize linear alternate infinite; | |
| } | |
| .trail .propulsion .exp:nth-child(1) { | |
| top: -6px; | |
| left: -20px; | |
| width: 50px; | |
| height: 50px; | |
| background: #C65430; | |
| animation-delay: .3s; | |
| } | |
| .trail .propulsion .exp:nth-child(2) { | |
| top: -17px; | |
| left: 0px; | |
| background: #EDB641; | |
| animation-delay: .5s; | |
| } | |
| .trail .propulsion .exp:nth-child(3) { | |
| top: 2px; | |
| left: 15px; | |
| width: 60px; | |
| height: 60px; | |
| background: #71BE93; | |
| animation-delay: .2s; | |
| } | |
| .trail .propulsion .exp:nth-child(4) { | |
| top: -6px; | |
| left: 30px; | |
| background: #5A95AD; | |
| animation-delay: .6s; | |
| } | |
| .trail .propulsion .exp:nth-child(5) { | |
| top: 10px; | |
| left: 45px; | |
| background: #726DA7; | |
| z-index: 3; | |
| animation-delay: .3s; | |
| } | |
| .trail .propulsion .exp:nth-child(6) { | |
| top: -5px; | |
| z-index: 1; | |
| left: 53px; | |
| background: #EDB641; | |
| animation-delay: .58s; | |
| } | |
| .trail .propulsion .exp:nth-child(7) { | |
| top: 10px; | |
| z-index: 1; | |
| background: #5A95AD; | |
| animation-delay: .45s; | |
| } | |
| @keyframes fade { | |
| from { | |
| opacity: 1; | |
| } | |
| to { | |
| opacity: 0; | |
| } | |
| } | |
| @keyframes shake { | |
| from { | |
| transform: translate(-50%, -50%) translate(-2px); | |
| } | |
| to { | |
| transform: translate(-50%, -50%) translate(2px); | |
| } | |
| } | |
| @keyframes altersize { | |
| from { | |
| transform: scale(0.5); | |
| } | |
| to { | |
| transform: scale(1); | |
| } | |
| } | |
| .stars{ | |
| z-index: -9999; | |
| } | |
| .star { | |
| position: absolute; | |
| width: 3px; | |
| height: 3px; | |
| background: #fff; | |
| border-radius: 50%; | |
| animation: 2s fall linear infinite; | |
| } | |
| @keyframes fall { | |
| from { | |
| transform: translate(0); | |
| } | |
| to { | |
| transform: translate(0, 700px); | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| let stars = 100; | |
| function refreshStar(item) { | |
| let newX = Math.floor(Math.random() * (window.innerWidth + 1)); | |
| let topStart = Math.floor(Math.random() * (window.innerHeight + 1)); | |
| $(item).css('left', `${newX}px`) | |
| .css('top', `${topStart}px`); | |
| } | |
| function addStar() { | |
| let newX = Math.floor(Math.random() * (window.innerWidth + 1)); | |
| let star = document.createElement('span'); | |
| star.classList.add('star'); | |
| star.style.left = newX + 'px'; | |
| $('.stars').append(star); | |
| setTimeout(() => { | |
| star.remove(); | |
| }, 10000); | |
| } | |
| function addStars() { | |
| for (let i = 0; i < stars; i++) { | |
| addStar(); | |
| } | |
| } | |
| $(document).ready(function() { | |
| addStars(); | |
| $('.star').each(function(index, item) { | |
| refreshStar(item); | |
| }) | |
| }) | |
| setInterval(() => { | |
| addStar(); | |
| }, 40) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment