パープルプラネットへの神秘的な航海-CSSチュートリアル-php.cn

パープルプラネットへの神秘的な航海

王林

リリース： 2024-09-07 14:34:02

オリジナル

848 人が閲覧しました

The Mysterious Voyage to Purple Planet

パープルプラネットへの神秘的な航海
広大な宇宙で、一人の航海者が遠い宇宙を航海し、奇妙な紫色の惑星に到着しました。船が着地すると、巨大な触手が影から飛び出し、船と風になびく隣の旗の両方を食い荒らしました。すべてが跡形もなく消え去った。惑星は奇妙に沈黙していましたが、この神秘的な出来事は何か深いことを示唆していました。エイリアンは存在し、私たちは彼らの世界では正真正銘の部外者でした。

デモは次のとおりです:
https://jagroop2001.github.io/DEV-To-Frontend-challenge/

コード展開:
このプロジェクトでは、シンプルな HTML と CSS を使用して宇宙の旅のビジュアルを作成し、JavaScript で星を動的に追加して没入型の宇宙環境を作成します。アニメーションにはいくつかの重要な要素が含まれています:

夜空を駆ける流れ星
宇宙を航行する回転宇宙船。
クレーターや波打つ触手など、神秘的な火星の風景。

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>

ログイン後にコピー

この HTML 構造には、星、船、火星、および惑星表面の触手やクレーターなどの追加の詳細を表す div 要素のいくつかのレイヤーが含まれています。 CSS セクションでこれらの要素のスタイルを設定し、アニメーション化します。

CSS マジック: スペースのスタイリングとアニメーション化

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

ログイン後にコピー

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 中国語 Web サイトの他の関連記事を参照してください。