Le mystérieux voyage sur la planète violette-tutoriel CSS-php.cn

Le mystérieux voyage sur la planète violette

王林

Libérer： 2024-09-07 14:34:02

original

774 Les gens l'ont consulté

The Mysterious Voyage to Purple Planet

Le mystérieux voyage vers la planète violette
Dans l’immensité de l’espace, un voyageur solitaire a navigué à travers des univers lointains jusqu’à arriver sur une étrange planète violette. Alors que le navire atterrissait, un tentacule géant surgit de l'ombre, dévorant à la fois le navire et un drapeau voisin flottant dans la brise. Tout a disparu sans laisser de trace. La planète était étrangement silencieuse, mais l'événement mystérieux faisait allusion à quelque chose de profond : les extraterrestres existaient et nous étions les véritables étrangers dans leur monde.

Voici la démo :
https://jagroop2001.github.io/DEV-To-Frontend-challenge/

Expansion du code :
Ce projet utilise du HTML et du CSS simples pour créer les visuels d'un voyage cosmique, tandis que JavaScript ajoute dynamiquement des étoiles pour créer un environnement spatial immersif. L'animation comprend plusieurs éléments clés :

Des étoiles filantes qui glissent dans le ciel nocturne.
Un vaisseau spatial rotatif qui navigue dans l'espace.
Un mystérieux paysage martien, avec des cratères et des tentacules ondulants.

Structure HTML

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

Copier après la connexion

Cette structure HTML contient plusieurs couches d'éléments div représentant les étoiles, le vaisseau, Mars et des détails supplémentaires comme les tentacules et les cratères à la surface de la planète. Nous styliserons et animerons ces éléments dans la section CSS.

Magie CSS : styliser et animer l'espace

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

Copier après la connexion

Ajout d'étoiles avec 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);
    }
});

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!