보라색 행성으로의 신비한 항해-CSS 튜토리얼-php.cn

보라색 행성으로의 신비한 항해

王林

풀어 주다： 2024-09-07 14:34:02

원래의

832명이 탐색했습니다.

The Mysterious Voyage to Purple Planet

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:

Shooting stars that glide across the night sky.
A rotating spaceship that navigates through space.
A mysterious Mars landscape, complete with craters and waving tentacles.

HTML Structure

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Space Animation</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <div class="space">
        <div class="shooting-star shooting1"></div>
        <div class="shooting-star shooting2"></div>
        <div class="shooting-star shooting3"></div>
        <div class="ship">
            <div class="ship-rotate">
                <div class="pod"></div>
                <div class="fuselage"></div>
            </div>
        </div>
        <div class="ship-shadow"></div>
        <div class="mars">
            <div class="tentacle"></div>
            <div class="flag">
                <div class="small-tentacle"></div>
            </div>
            <div class="planet">
                <div class="surface"></div>
                <div class="crater1"></div>
                <div class="crater2"></div>
                <div class="crater3"></div>
            </div>
        </div>
    </div>
    <script src="script.js"></script>
</body>

</html>

로그인 후 복사

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

로그인 후 복사

위 내용은 보라색 행성으로의 신비한 항해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!