Reiner CSS-Beispielcode für Meteorschauer-Hintergrund

<Vorlage>
    <Ansichtsklasse="Leerzeichen">
        <view class="Planet">
            <Ansicht Klasse="planet_shadow"></Ansicht>
            <Ansicht Klasse="Krater1"></Ansicht>
            <Ansicht Klasse="Krater2"></Ansicht>
            <Ansicht Klasse="Krater3"></Ansicht>
            <Ansicht Klasse="Krater4"></Ansicht>
        </Ansicht>
        <Ansichtsklasse="Sterne">
            <Ansichtsklasse="Stern"></Ansicht>
            <view class="Stern rosa"></view>
            <view class="Stern blau"></view>
            <view class="Stern gelb"></view>
        </Ansicht>
    </Ansicht>
</Vorlage>

<style lang="scss">
    .Raum {
        Breite: 100 %;
        Höhe: 100vh;
        Hintergrund: #121212;
    }

    .Planet {
        Breite: 150px;
        Höhe: 150px;
        Randradius: 50 %;
        Hintergrund: #333;
        Position: absolut;
        links: 50%;
        oben: 50 %;
        Rand: -75px 0 0 -75px;
        Überlauf: versteckt;
        Z-Index: 2;
    }

    .planet_shadow {
        Position: absolut;
        Randradius: 50 %;
        Höhe: 100%;
        Breite: 100 %;
        oben: -40%;
        rechts: -10%;
        Rand: 35px durchgezogen rgba(0, 0, 0, .15);
    }

    .krater1,
    .krater2,
    .krater3,
    .krater4 {
        Position: absolut;
        Randradius: 50 %;
        Hintergrund: rgba(0, 0, 0, .3);
        Box-Shadow: Einschub 3px 3px 0 rgba(0, 0, 0, .2);
    }

    .krater1 {
        Breite: 20px;
        Höhe: 20px;
        links: 25 %;
        oben: 20 %;
    }

    .krater2 {
        Breite: 10px;
        Höhe: 10px;
        links: 50%;
        oben: 60 %;
    }

    .krater3 {
        Breite: 15px;
        Höhe: 15px;
        links: 30%;
        oben: 65 %;
    }

    .krater4 {
        Breite: 15px;
        Höhe: 15px;
        links: 60%;
        oben: 35 %;
    }

    .Stern {
        Anzeige: Block;
        Breite: 5px;
        Höhe: 5px;
        Randradius: 50 %;
        Hintergrund: #FFF;
        oben: 100px;
        links: 400px;
        Position: relativ;
        Transform-Ursprung: 100 % 0;
        Animation: Star-Ani 6s unendliches Ausklinken;
        Boxschatten: 0 0 5px 5px rgba(255, 255, 255, .3);
        Deckkraft: 0;
        Z-Index: 2;
    }

    .star:nach {
        Inhalt: '';
        Anzeige: Block;
        oben: 0px;
        links: 4px;
        Rand: 0px durchgezogen #fff;
        Rahmenbreite: 0px 90px 2px 90px;
        Rahmenfarbe: transparent transparent transparent rgba(255, 255, 255, .3);
        transformieren: drehen(-45 Grad) übersetzen3d(1px, 3px, 0);
        Kastenschatten: 0 0 1px 0 rgba(255, 255, 255, .1);
        Transform-Ursprung: 0 % 100 %;
        Animation: Shooting-Ani 3 s unendliches Ausklinken;
    }

    .Rosa {
        oben: 30px;
        links: 395px;
        Hintergrund: #ff5a99;
        Animationsverzögerung: 5 s;
        -Webkit-Animationsverzögerung: 5 s;
        -moz-Animationsverzögerung: 5 s;
    }

    .pink:nach {
        Rahmenfarbe: transparent transparent transparent #ff5a99;
        Animationsverzögerung: 5 s;
        -Webkit-Animationsverzögerung: 5 s;
        -moz-Animationsverzögerung: 5 s;
    }

    .Blau {
        oben: 35px;
        links: 432px;
        Hintergrund: Cyan;
        Animationsverzögerung: 7 s;
        -Webkit-Animationsverzögerung: 7 s;
        -moz-Animationsverzögerung: 7 s;
    }

    .blau:nach {
        Rahmenfarbe: „Transpareanimation-Verzögerung: 12 s“;
        -Webkit-Animationsverzögerung: 7 s;
        -moz-Animationsverzögerung: 7 s;
        Animationsverzögerung: 7 s;
    }

    .Gelb {
        oben: 50px;
        links: 600px;
        Hintergrund: #ffcd5c;
        Animationsverzögerung: 5,8 s;
    }

    .gelb:nach {
        Rahmenfarbe: transparent transparent transparent #ffcd5c;
        Animationsverzögerung: 5,8 s;
    }

    @keyframes star-ani {
        0% {
            Deckkraft: 0;
            transformieren: skalieren(0) drehen(0) übersetzen3d(0, 0, 0);
            -webkit-transform: skalieren(0) drehen(0) übersetzen3d(0, 0, 0);
            -moz-transform: skalieren(0) drehen(0) übersetzen3d(0, 0, 0);
        }

        50 % {
            Deckkraft: 1;
            transformieren: skalieren(1) drehen(0) übersetzen3d(-200px, 200px, 0);
            -webkit-transform: Skalierung(1) Drehen(0) Translate3d(-200px, 200px, 0);
            -moz-transform: Skalierung(1) Drehen(0) Translate3d(-200px, 200px, 0);
        }

        100 % {
            Deckkraft: 0;
            transformieren: skalieren(1) drehen(0) übersetzen3d(-300px, 300px, 0);
            -webkit-transform: Skalierung(1) Drehen(0) Translate3d(-300px, 300px, 0);
            -moz-transform: Skalierung(1) Drehen(0) Translate3d(-300px, 300px, 0);
        }
    }
</Stil>