Pure CSS meteor shower background sample code

Pure CSS meteor shower background sample code

GitHub address, you can star it if you like it

Plugin preview

Using the tutorial code display

Vue page usage

<template>
    <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>
        <view class="stars">
            <view class="star"></view>
            <view class="star pink"></view>
            <view class="star blue"></view>
            <view class="star yellow"></view>
        </view>
    </view>
</template>

Style

<style lang="scss">
    .space {
        width: 100%;
        height: 100vh;
        background: #121212;
    }

    .planet {
        width: 150px;
        height: 150px;
        border-radius: 50%;
        background: #333;
        position: absolute;
        left: 50%;
        top: 50%;
        margin: -75px 0 0 -75px;
        overflow: hidden;
        z-index: 2;
    }

    .planet_shadow {
        position: absolute;
        border-radius: 50%;
        height: 100%;
        width: 100%;
        top: -40%;
        right: -10%;
        border: 35px solid rgba(0, 0, 0, .15);
    }

    .crater1,
    .crater2,
    .crater3,
    .crater4 {
        position: absolute;
        border-radius: 50%;
        background: rgba(0, 0, 0, .3);
        box-shadow: inset 3px 3px 0 rgba(0, 0, 0, .2);
    }

    .crater1 {
        width: 20px;
        height: 20px;
        left: 25%;
        top: 20%;
    }

    .crater2 {
        width: 10px;
        height: 10px;
        left: 50%;
        top: 60%;
    }

    .crater3 {
        width: 15px;
        height: 15px;
        left: 30%;
        top: 65%;
    }

    .crater4 {
        width: 15px;
        height: 15px;
        left: 60%;
        top: 35%;
    }

    .star {
        display: block;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: #FFF;
        top: 100px;
        left: 400px;
        position: relative;
        transform-origin: 100% 0;
        animation: star-ani 6s infinite ease-out;
        box-shadow: 0 0 5px 5px rgba(255, 255, 255, .3);
        opacity: 0;
        z-index: 2;
    }

    .star:after {
        content: '';
        display: block;
        top: 0px;
        left: 4px;
        border: 0px solid #fff;
        border-width: 0px 90px 2px 90px;
        border-color: transparent transparent transparent rgba(255, 255, 255, .3);
        transform: rotate(-45deg) translate3d(1px, 3px, 0);
        box-shadow: 0 0 1px 0 rgba(255, 255, 255, .1);
        transform-origin: 0% 100%;
        animation: shooting-ani 3s infinite ease-out;
    }

    .pink {
        top: 30px;
        left: 395px;
        background: #ff5a99;
        animation-delay: 5s;
        -webkit-animation-delay: 5s;
        -moz-animation-delay: 5s;
    }

    .pink:after {
        border-color: transparent transparent transparent #ff5a99;
        animation-delay: 5s;
        -webkit-animation-delay: 5s;
        -moz-animation-delay: 5s;
    }

    .blue {
        top: 35px;
        left: 432px;
        background: cyan;
        animation-delay: 7s;
        -webkit-animation-delay: 7s;
        -moz-animation-delay: 7s;
    }

    .blue:after {
        border-color: 'transpareanimation-delay: 12s';
        -webkit-animation-delay: 7s;
        -moz-animation-delay: 7s;
        animation-delay: 7s;
    }

    .yellow {
        top: 50px;
        left: 600px;
        background: #ffcd5c;
        animation-delay: 5.8s;
    }

    .yellow:after {
        border-color: transparent transparent transparent #ffcd5c;
        animation-delay: 5.8s;
    }

    @keyframes star-ani {
        0% {
            opacity: 0;
            transform: scale(0) rotate(0) translate3d(0, 0, 0);
            -webkit-transform: scale(0) rotate(0) translate3d(0, 0, 0);
            -moz-transform: scale(0) rotate(0) translate3d(0, 0, 0);
        }

        50% {
            opacity: 1;
            transform: scale(1) rotate(0) translate3d(-200px, 200px, 0);
            -webkit-transform: scale(1) rotate(0) translate3d(-200px, 200px, 0);
            -moz-transform: scale(1) rotate(0) translate3d(-200px, 200px, 0);
        }

        100% {
            opacity: 0;
            transform: scale(1) rotate(0) translate3d(-300px, 300px, 0);
            -webkit-transform: scale(1) rotate(0) translate3d(-300px, 300px, 0);
            -moz-transform: scale(1) rotate(0) translate3d(-300px, 300px, 0);
        }
    }
</style>

compatibility

All platform compatible

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

<<:  Code to display the contents of a txt book on a web page

>>:  MySQL foreign key setting method example

Recommend

CSS--overflow:hidden in project examples

Here are some examples of how I use this property ...

JavaScript form validation example

HTML forms are commonly used to collect user info...

Summary of common Mysql DDL operations

Library Management Create a library create databa...

Ant Design Blazor component library's routing reuse multi-tab function

Recently, there has been a growing demand for imp...

The whole process record of introducing Vant framework into WeChat applet

Preface Sometimes I feel that the native UI of We...

Summary of situations where MySQL indexes will not be used

Types of Indexes in MySQL Generally, they can be ...

Docker stop stops/remove deletes all containers

This article mainly introduces Docker stop/remove...

Tomcat uses thread pool to handle remote concurrent requests

By understanding how tomcat handles concurrent re...

MySQL deep paging (how to quickly paginate tens of millions of data)

Table of contents Preface Case optimization summa...

A brief discussion on MySQL B-tree index and index optimization summary

MySQL's MyISAM and InnoDB engines both use B+...

Detailed explanation of the use and precautions of crontab under Linux

Crontab is a command used to set up periodic exec...

Introduction to the use of HTML element noscript

noscript definition and usage The noscript elemen...