純粋な CSS 流星群の背景サンプルコード

<テンプレート>
    <view class="space">
        <view class="planet">
            <view class="planet_shadow"></view>
            <view class="crater1"></view>
            <view class="crater2"></view>
            <view class="crater3"></view>
            <view class="crater4"></view>
        </ビュー>
        <view class="stars">
            <view class="star"></view>
            <view class="star pink"></view>
            <view class="star blue"></view>
            <view class="star yellow"></view>
        </ビュー>
    </ビュー>
</テンプレート>

<スタイル lang="scss">
    。空間 {
        幅: 100%;
        高さ：100vh;
        背景: #121212;
    }

    。惑星 {
        幅: 150ピクセル;
        高さ: 150px;
        境界線の半径: 50%;
        背景: #333;
        位置: 絶対;
        左: 50%;
        上位: 50%;
        マージン: -75px 0 0 -75px;
        オーバーフロー: 非表示;
        zインデックス: 2;
    }

    .planet_shadow {
        位置: 絶対;
        境界線の半径: 50%;
        高さ: 100%;
        幅: 100%;
        上限: -40%;
        右: -10%;
        境界線: 35px実線 rgba(0, 0, 0, .15);
    }

    .クレーター1,
    .クレーター2,
    .クレーター3,
    .クレーター4 {
        位置: 絶対;
        境界線の半径: 50%;
        背景: rgba(0, 0, 0, .3);
        ボックスシャドウ: インセット 3px 3px 0 rgba(0, 0, 0, .2);
    }

    .クレーター1 {
        幅: 20px;
        高さ: 20px;
        左: 25%;
        上位: 20%
    }

    .クレーター2 {
        幅: 10px;
        高さ: 10px;
        左: 50%;
        上位: 60%
    }

    .クレーター3 {
        幅: 15px;
        高さ: 15px;
        残り: 30%
        上位: 65%
    }

    .クレーター4 {
        幅: 15px;
        高さ: 15px;
        左: 60%;
        上位: 35%
    }

    。星 {
        表示: ブロック;
        幅: 5px;
        高さ: 5px;
        境界線の半径: 50%;
        背景: #FFF;
        上: 100px;
        左: 400px;
        位置: 相対的;
        変換の原点: 100% 0;
        アニメーション: スターアニ 6s 無限イーズアウト;
        ボックスの影: 0 0 5px 5px rgba(255, 255, 255, .3);
        不透明度: 0;
        zインデックス: 2;
    }

    .star:after {
        コンテンツ： '';
        表示: ブロック;
        上: 0px;
        左: 4px;
        境界線: 0px 実線 #fff;
        境界線の幅: 0px 90px 2px 90px;
        境界線の色: 透明 透明 透明 rgba(255, 255, 255, .3);
        変換: 回転(-45度)、変換3d(1px, 3px, 0);
        ボックスシャドウ: 0 0 1px 0 rgba(255, 255, 255, .1);
        変換の原点: 0% 100%;
        アニメーション: shooting-ani 3s 無限イーズアウト;
    }

    。ピンク {
        上: 30px;
        左: 395ピクセル;
        背景: #ff5a99;
        アニメーション遅延: 5秒;
        -webkit アニメーション遅延: 5 秒;
        -moz-アニメーション遅延: 5秒;
    }

    .pink:後{
        境界線の色: 透明 透明 透明 #ff5a99;
        アニメーション遅延: 5秒;
        -webkit アニメーション遅延: 5 秒;
        -moz-アニメーション遅延: 5秒;
    }

    。青 {
        上: 35px;
        左: 432ピクセル;
        背景: シアン;
        アニメーション遅延: 7秒;
        -webkit アニメーション遅延: 7 秒;
        -moz-アニメーション遅延: 7秒;
    }

    .blue:後{
        境界線の色: '透過アニメーション遅延: 12 秒';
        -webkit アニメーション遅延: 7 秒;
        -moz-アニメーション遅延: 7秒;
        アニメーション遅延: 7秒;
    }

    。黄色 {
        上: 50px;
        左: 600ピクセル;
        背景: #ffcd5c;
        アニメーション遅延: 5.8秒;
    }

    .yellow:after {
        境界線の色: 透明 透明 透明 #ffcd5c;
        アニメーション遅延: 5.8秒;
    }

    @keyframes スターアニ {
        0% {
            不透明度: 0;
            変換: スケール(0) 回転(0) 3D変換(0, 0, 0);
            -webkit-transform: スケール(0) 回転(0) 3d変換(0, 0, 0);
            -moz-transform: スケール(0) 回転(0) 3d変換(0, 0, 0);
        }

        50% {
            不透明度: 1;
            変換: スケール(1) 回転(0) translate3d(-200px, 200px, 0);
            -webkit-transform: スケール(1) 回転(0) translate3d(-200px, 200px, 0);
            -moz-transform: スケール(1) 回転(0) translate3d(-200px, 200px, 0);
        }

        100% {
            不透明度: 0;
            変換: スケール(1) 回転(0) translate3d(-300px, 300px, 0);
            -webkit-transform: スケール(1) 回転(0) translate3d(-300px, 300px, 0);
            -moz-transform: スケール(1) 回転(0) translate3d(-300px, 300px, 0);
        }
    }
</スタイル>