Die mysteriöse Reise zum Lila Planeten-CSS-Tutorial-php.cn

The Mysterious Voyage to Purple Planet

Die mysteriöse Reise zum Lila Planeten
In den Weiten des Weltraums segelte ein einsamer Reisender durch ferne Universen, bis er auf einem seltsamen lila Planeten ankam. Als das Schiff aufsetzte, brach ein riesiger Tentakel aus dem Schatten hervor und verschlang sowohl das Schiff als auch eine benachbarte Flagge, die im Wind wehte. Alles ist spurlos verschwunden. Der Planet war seltsam still, aber das mysteriöse Ereignis deutete auf etwas Tiefgründiges hin: Außerirdische existierten, und wir waren die echten Außenseiter in ihrer Welt.

Hier ist die Demo:
https://jagroop2001.github.io/DEV-To-Frontend-challenge/

Code-Erläuterung:
Dieses Projekt verwendet einfaches HTML und CSS, um die Bilder einer kosmischen Reise zu erstellen, während JavaScript dynamisch Sterne hinzufügt, um eine immersive Weltraumumgebung zu schaffen. Die Animation umfasst mehrere Schlüsselelemente:

Sternschnuppen, die über den Nachthimmel gleiten.
Ein rotierendes Raumschiff, das durch den Weltraum navigiert.
Eine geheimnisvolle Marslandschaft, komplett mit Kratern und wehenden Tentakeln.

HTML-Struktur

<!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>

Nach dem Login kopieren

Diese HTML-Struktur enthält mehrere Ebenen von div-Elementen, die die Sterne, das Schiff, den Mars und zusätzliche Details wie den Tentakel und Krater auf der Planetenoberfläche darstellen. Wir werden diese Elemente im CSS-Bereich formatieren und animieren.

CSS Magic: Raum gestalten und animieren

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

Nach dem Login kopieren

Hinzufügen von Sternen mit 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);
    }
});

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonDie mysteriöse Reise zum Lila Planeten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!