The Mysterious Voyage to Purple Planet
In the vastness of space, a lone voyager sailed across faraway universes until arriving on a weird purple planet. As the ship touched down, a giant tentacle erupted from the shadows, devouring both the ship and a neighboring flag flying in the breeze. Everything disappeared without a trace. The planet was strangely silent, but the mysterious event hinted at something profound:aliens existed, and we were the genuine outsiders in their world.
Here is the demo :
https://jagroop2001.github.io/DEV-To-Frontend-challenge/
Code Expanation :
This project uses simple HTML and CSS to craft the visuals of a cosmic journey, while JavaScript dynamically adds stars to create an immersive space environment. The animation includes several key elements:
HTML Structure
CSS Space Animation
This HTML structure contains several layers of div elements representing the stars, the ship, Mars, and additional details like the tentacle and craters on the planet's surface. We’ll style and animate these elements in the CSS section.
CSS Magic: Styling and Animating Space
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); body { margin: 0; height: 100vh; overflow: hidden; font-family: 'Roboto', sans-serif; } .space { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000000; overflow: hidden; } .star { position: absolute; background-color: white; border-radius: 50%; opacity: 0.8; box-shadow: 0 0 10px rgba(255, 255, 255, 0.5); animation: twinkle 2s infinite ease-in-out alternate, move 5s infinite ease-in-out; } @keyframes move { 0%, 100% { transform: translateX(0) translateY(0); } 50% { transform: translateX(10px) translateY(5px); } } @keyframes twinkle { 0% { opacity: 0.8; } 100% { opacity: 0.3; } } .ship { position: absolute; right: 50%; top: 50%; margin-top: -55px; margin-right: -55px; height: 22px; background: rgba(0, 0, 0, .1); transform-origin: 0% 100% 0; z-index: 1; animation: ship 12s cubic-bezier(0.645, 0.045, 0.355, 1) infinite; .ship-rotate { position: absolute; height: 22px; transform: rotate(-110deg); animation: ship-rotate 12s cubic-bezier(0.645, 0.045, 0.355, 1) infinite; } .pod { position: absolute; top: 0; left: -8px; height: 16px; width: 16px; background: #eee; border-radius: 100% 0 100% 0; transform: rotate(-45deg); } .fuselage { position: absolute; top: 14px; left: -6px; height: 8px; width: 12px; background: #eee; border-radius: 100% 100% 0 0; &:after { content: ""; position: absolute; left: 2px; top: 100%; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 6px solid #fc7100; } } } .mars { position: absolute; top: 50%; left: 50%; z-index: 2; .tentacle { position: absolute; top: -60px; right: -80px; z-index: 1; height: 70px; width: 70px; border-radius: 100%; border-left: 15px solid #fd13f2; transform: rotate(-30deg); animation: tentacle 12s cubic-bezier(0.645, 0.045, 0.355, 1) infinite; } .flag { position: absolute; height: 17px; width: 15px; top: -57px; left: -1px; animation: flag-pole 12s cubic-bezier(0.645, 0.045, 0.355, 1) infinite; &:before { content: ""; position: absolute; height: 17px; width: 2px; background: #eee; } &:after { content: ""; position: absolute; height: 10px; width: 14px; left: 2px; top: 0; background: #aaa; animation: flag-unfurl 12s cubic-bezier(0.645, 0.045, 0.355, 1) infinite; } .small-tentacle { position: absolute; left: -16px; top: 3px; height: 50px; width: 50px; border-left: 10px solid #fd13f2; border-radius: 100%; transform: rotate(25deg); animation: small-tentacle 12s cubic-bezier(0.645, 0.045, 0.355, 1) infinite; z-index: 2; } } .planet { position: absolute; border-radius: 100%; height: 120px; width: 120px; overflow: hidden; margin-left: -60px; margin-top: -60px; z-index: 2; .surface { position: absolute; border-radius: 100%; height: 140%; width: 140%; top: -30%; right: -10%; border: 30px solid rgba(0, 0, 0, .15); background: #9562C7; } .crater1, .crater2, .crater3 { position: absolute; border-radius: 100%; background: rgba(0, 0, 0, .15); box-shadow: inset 3px 3px 0 rgba(0, 0, 0, .2); } .crater1 { height: 20px; width: 20px; top: 32%; left: 17%; } .crater2 { height: 10px; width: 10px; top: 26%; left: 55%; box-shadow: inset 2px 2px 0 rgba(0, 0, 0, .2); } .crater3 { height: 10px; width: 10px; top: 60%; left: 40%; box-shadow: inset 2px 2px 0 rgba(0, 0, 0, .2); } } } @keyframes small-tentacle { 0% { transform: rotate(-60deg); } 86% { transform: rotate(-60deg); } 89% { transform: rotate(10deg); } 100% { transform: rotate(10deg); } } @keyframes tentacle { 0% { transform: rotate(-30deg); } 75% { transform: rotate(-30deg); } 80% { transform: rotate(-165deg) translate(6px, 8px); } 82.5% { transform: rotate(-165deg) translate(28px, -17px); } 100% { transform: rotate(-165deg) translate(35px, -22px); } } @keyframes ship { 0% { right: -10%; top: -10%; margin-top: -55px; margin-right: -55px; } 40% { right: 50%; top: 50%; } 79.5% { margin-top: -55px; margin-right: -55px; } 84% { margin-top: -20px; margin-right: 0px; } 100% { right: 50%; top: 50%; margin-top: 0px; margin-right: 0px; } } @keyframes ship-rotate { 0% { transform: rotate(-110deg); } 20% { transform: rotate(-110deg); } 34% { transform: rotate(47deg); } 79% { transform: rotate(47deg); } 100% { transform: rotate(47deg); } } @keyframes ship-shadow { 0% { right: -10%; transform: scale(1.4, 1); opacity: .3; } 40% { right: 50%; transform: scale(.75, 1); opacity: 1; } 100% { right: 50%; } } @keyframes flag-pole { 0% { top: -57px; } 48% { top: -57px; } 54% { top: -77px; } 90% { top: -77px; } 92% { top: -57px; } 100% { top: -57px; } } @keyframes flag-unfurl { 0% { width: 0; } 55% { width: 0; } 60% { width: 14px; } 90% { width: 14px; } 100% { width: 14px; } }
Adding Stars with JavaScript
document.addEventListener('DOMContentLoaded', () => { const galaxy = document.querySelector('.space'); for (let i = 0; i < 200; i++) { const star = document.createElement('div'); star.classList.add('star'); // Randomize the position and size of the stars const size = Math.random() * 4 + 'px'; star.style.width = size; star.style.height = size; star.style.top = Math.random() * 100 + '%'; star.style.left = Math.random() * 100 + '%'; galaxy.appendChild(star); } });
The above is the detailed content of The Mysterious Voyage to Purple Planet. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
