CSS and JS to achieve romantic meteor shower animation

< body > 
    < div class = "container" > 
        < div id = "mask" > </ div > 
        < div id = "sky" > </ div > 
        < div id = "moon" > </ div > 
        < div id = "stars" > </ div > 
        < div class = "cloud cloud-1" ></ div > 
        <div class = "cloud cloud-2" > </div > 
        < div class = "cloud cloud-3" > </ div > 
    </ div > 
</ body >

/* - - - - - - Restart - - - - - - */
 
 * {
     Margin: 0 ;
     padding: 0;
 }
 
 html,
  body {
      width: 100%;
     Minimum width: 1000px;
     Height: 100%;
     Minimum height: 400px;
     overflow:hidden;
 }

 /*------------Canvas------------*/ 
 .container {
      position：relative;
     Height: 100%;
 }
 /* Mask layer */
 
 #mask {
      position:absolute;
     width: 100%;
     Height: 100%;
     background: rgba(0,0,0,.8);
     z-index: 900;
 }
 /*Sky background*/
 
 #sky {
      width: 100%;
     Height: 100%;
     background: linear-gradient(rgba(0,150,255,1),rgba(0,150,255,.8),rgba(0,150,255,.5));
 }
 / *moon* /
 
 #moon {
      position:absolute;
     top: 50px;
     Right: 200px;
     Width: 120px;
     Height: 120px;
     background: rgba(251,255,25,0.938);
     border-radius: 50%;
     box-shadow: 0 0 20px rgba(251, 255, 25, 0.5);
     z-index: 9999;
 }
 /* Twinkle Stars*/
 
 .blink {
      position:absolute;
     background: rgb(255,255,255);
     border-radius: 50%;
     box-shadow: 0 0 5px rgb(255,255,255);
     opacity: 0;
     z-index: 10000;
 }
 /* Shooting Star */
 
 .star {
      position:absolute;
     opacity: 0;
     z-index: 10000;
 }
 
 .star :: after {
      content: "";
     display:block;
     Boundary: solid;
     border-width: 2px 0 2px 80px ;
     /*The meteor gradually decreases in length*/ 
     border-color: transparent transparent transparent rgba(255,255,255,1);
     border-radius: 2px 0 0 2px ;
     transform: rotate(-45deg);
     transform-origin: 0 0 0 ;
     box-shadow: 0 0 20px rgba(255,255,255,.3);
 }
 / *cloud* /
 
 .cloud {
      position:absolute;
     width: 100%;
     Height: 100px;
 }
 
 .cloud-1 {
      bottom: -100px;
     z-index: 1000;
     opacity: 1 ;
     transform:scale(1.5);
     -webkit-transform: scale(1.5);
     -moz-transform: scale(1.5);
     -ms-transform:scale(1.5);
     -o-transform:scale(1.5);
 }
 
 .cloud-2 {
      left: -100px;
     Bottom: -50px;
     z-index: 999;
     Opacity: . 5 ;
     transform:rotate(7deg);
     -webkit-transform: rotate(7deg);
     -moz-transform: rotate(7deg);
     -ms-transform:rotate(7deg);
     -o-transform:rotate(7deg);
 }
 
 .cloud-3 {
      left: 120px;
     Bottom: -50px;
     z-index: 999;
     Opacity: . 1 ;
     transform: rotate(-10deg);
     -webkit-transform: rotate(-10deg);
     -moz-transform: rotate(-10deg);
     -ms-transform:rotate(-10deg);
     -o-transform:rotate(-10deg);
 }
 
 .circle {
      position:absolute;
     border-radius: 50%;
     background: #fff;
 }
 
 .circle-1 {
      width: 100px;
     Height: 100px;
     Top: -50px;
     Left: 10px;
 }
 
 .circle-2 {
      width: 150px;
     Height: 150px;
     Top: -50px;
     left: 30px;
 }
 
 .circle-3 {
      width: 300px;
     Height: 300px;
     Top: -100px;
     Left: 80px;
 }
 
 .circle-4 {
      width: 200px;
     Height: 200px;
     Top: -60px;
     Left: 300px;
 }
 
 .circle-5 {
      width: 80px;
     Height: 80px;
     Top: -30px;
     Left: 450px;
 }
 
 .circle-6 {
      width: 200px;
     Height: 200px;
     Top: -50px;
     Left: 500px;
 }
 
 .circle-7 {
      width: 100px;
     Height: 100px;
     Top: -10px;
     Left: 650px;
 }
 
 .circle-8 {
      width: 50px;
     Height: 50px;
     top: 30px;
     Left: 730px;
 }
 
 .circle-9 {
      width: 100px;
     Height: 100px;
     top: 30px;
     Left: 750px;
 }
 
 .circle-10 {
      width: 150px;
     Height: 150px;
     top: 10px;
     Left: 800px;
 }
 
 .circle-11 {
      width: 150px;
     Height: 150px;
     Top: -30px;
     Left: 850px;
 }
 
 .circle-12 {
      width: 250px;
     Height: 250px;
     Top: -50px;
     Left: 900px;
 }
 
 .circle-13 {
      width: 200px;
     Height: 200px;
     Top: -40px;
     Left: 1000px;
 }
 
 .circle-14 {
      width: 300px;
     Height: 300px;
     Top: -70px;
     Left: 1100px;
 }

// meteor animation setInterval(function() {
     const obj = addChild("#sky","div",2,"star");

    for (let i = 0; i < obj.children.length; i++) {
         const top = -50 + Math.random() * 200 + "px",
            left = 200 + Math.random() * 1200 + "px",
            scale = 0.3 + Math.random() * 0.5;
        const timer = 1000 + Math.random()*1000;

        obj.children[i].style.top = top;
        obj.children[i].style.left = left;
        obj.children[i].style.transform = `scale(${scale})`;

        requestAnimation({
            ele: obj.children[i],
             attr: ["top", "left", "opacity"],
             Values: [150, -150, .8],
             time：timer，
             flag: false,
             fn: function() {
                requestAnimation({
                    ELE: obj.children[I],
                     attr:["top","left","opaque"],
                     Values: [150, -150, 0],
                     Time: timer,
                     Flag: false,
                     fn:() => {
                        obj.parent.removeChild(obj.children[i]);
                    }
                })
            }
        });
    }

}, 1000);

//Twinkling star animation setInterval(function() {
     const obj = addChild("#stars","div",2,"blink");

    for (let i = 0; i < obj.children.length; i++) {
         const top = -50 + Math.random() * 500 + "px",
            left = 200 + Math.random() * 1200 + "px",
            round = 1 + Math.random()*2 + "px";
        const timer = 1000 + Math.random() * 4000;

        obj.children[i].style.top = top;
        obj.children[i].style.left = left;
        obj.children[i].style.width = round;
        obj.children[i].style.height = round;

        requestAnimation({
            ele: obj.children[i],
             attr: "opacity",
             Value: .5,
             time：timer，
             flag: false,
             fn: function() {
                requestAnimation({
                    ele: obj.children[i],
                     attr: "opacity",
                     value: 0,
                     time：timer，
                     flag: false,
                     fn: function() {
                        obj.parent.removeChild(obj.children[i]);
                    }
                });
            }
        });
    }

}, 1000);

//Moon movement requestAnimation ({
    ele: "#moon",
     attr: "right",
     Value: 1200,
     Time: 10000000,
});


//Add clouds const clouds = addChild(".cloud","div",14,"circle",true);
for (let i = 0; i < clouds.children.length; i++) {
     for (let j = 0; j < clouds.children[i].length;) {
        clouds.children[i][j].classList.add(`circle-${++j}`);
    }
}
//Cloud animation let flag = 1;
setInterval()
    Function() {
         const clouds = document.querySelectorAll(".cloud");
        const left = Math.random()*5;
        bottom = Math.random()*5;

        let timer = 0 ;
        for (let i = 0; i < clouds.length; i++) {
            requestAnimation({
                ele：clouds [i]，
                 attr: ["left", "bottom"],
                 value:flag%2? [-left,-bottom]: [left,bottom],
                 time:timer += 500,
                 flag: false,
                 fn: function() {
                    requestAnimation({
                        ele：clouds [i]，
                         attr: ["left", "bottom"],
                         value:flag%2? [left, bottom]: [-left, -bottom],
                         time：timer，
                         flag: false
                    })
                }
            });
        }

        flag++;
    }, 2000)

//------------------------------------------Animation------------------------------------------------------- 
//Motion animation, call Tween.js 
//ele: dom | class | id | tag node | class name | id name | tag name, only supports selecting one node, class name and tag name can only select the first one in the page //attr: attribute attribute name //value: target value target value //time: duration duration //tween: timing function function equation //flag: Boolean determines whether to move by value or by position, the default is to move by position //fn: callback callback function //add return value: return the internal parameter object, you can interrupt the animation function by setting the return object's property stop to true requestAnimation(obj) {
     // -------------------------------------Parameter settings--------------------------------------------- 
    //Default property const parameter = {
         ele: null,
         attr: null,
         value: null,
         time: 1000,
         tween: "linear",
         flag: true,
         stop：false,
         fn: ""
    }

    //Merge incoming properties Object .assign (parameter, obj); //Overwrite duplicate properties // ------------------------------------- Animation settings --------- ------------------------------------ 
    //Create initial parameters for the motion equation for easy reuse let start = 0 ; //Used to save the initial timestamp let target = (typeof parameter.ele === "string"? document .querySelector(parameter.ele):parameter.ele), //Target node attr = parameter.attr, //Target attribute beginAttr = parseFloat(getComputedStyle(target)[attr]), //Attr starting value value = parameter.value, //Motion target value count = value - beginAttr, //Actual motion value time = parameter.time, //Motion duration,
        tween = parameter.tween, //motion function flag = parameter.flag,
        callback = parameter.fn, // callback function curVal = 0; // current value of motion // determine whether the passed function is an array, multi-segment motion (function () {
         if (attr instanceof Array) {
            beginAttr = [];
            count = [];
            for (get my attr) {
                 const val = parseFloat(getComputedStyle(target)[i]);
                beginAttr.push(val);
                count.push(value - val);
            }
        }
        if (value instanceof Array) {
             for (let i in value) {
                count[i] = value[i] - beginAttr[i];
            }
        }
    })();

    //Motion function animation (timestamp) {
         if (parameter.stop) return; //break //store initial timestamp if (!start) start = timestamp;
        // Elapsed time let t = timestamp - start;
        //Judge multi-segment motion if (beginAttr instanceof Array) {
             // const len ​​= beginAttr.length //Store the length of the array, reuse //Multi-segment motion type 1 - multiple attributes, same target, same time/different time if (typeof count === "number") { //Same target//same time if (typeof time === "number") {
                     if (t> time) t = time; //Judge whether it exceeds the target value //Loop attr and assign values ​​to each (let i in beginAttr) {
                         if (flag) curVal = Tween [tween] (t, beginAttr [i], count, time); //Call Tween and return the current attribute value. The calculation method is to move to the write position else curVal = Tween [tween] (t, beginAttr [i], count + beginAttr [i], time); //Call Tween and return the current attribute value. The calculation method is to move the write distance if (attr [i] === "opacity") target.style [attr [i]] = curVal; //Assign a value to the attribute else target.style [attr [i]] = curVal + "px" ; //Assign a value to the attribute if (t < time) requestAnimationFrame (animate); //Judge whether the movement is completed other callbacks && callback (); //Call callback function }
                    return;
                }

                //Different time if (time instanceof Array) {
                     //Loop time, attr, respectively assigned to (let me in beginAttr) {
                         //Error judgment if (!time[i] && time[i] !== 0) {
                             throw new Error（
                                 "The length of input time is not equal to the length of property");
                        }

                        //Judge whether the animation has been completed. If completed, skip this loop if (parseFloat (getComputedStyle (target) [attr [i]]) === (typeof value === "number"? value: value [i]))
                             continue;
                        // t = timestamp - start; // Initialize t each time through the loop 
                        if (t > time [i]) t = time [i]; //Judge whether it exceeds the target value if (flag || attr [i] === "opacity") curVal = Tween [tween] (t, beginAttr [i], count, i); //Call Tween and return the current attribute value. The calculation method at this time is to move to the write position else curVal = Tween [tween] (t, beginAttr [i], count + beginAttr [i], i); //Call Tween and return the current attribute value. The calculation method at this time is to move the write distance if (attr [i] === "opacity") target.style [attr [i]] = curVal; //Assign a value to the attribute else target.style [attr [i]] = curVal + "px" ; //Assign a value to the attribute }

                    if (t < Math.max(...time)) requestAnimationFrame(animate); //Judge whether the function has finished the other callbacks && callback(); //If the longest animation has been executed, investigate the callback function return;
                }
            }

            //Multi-segment motion type 2 - multiple attributes, different targets, same time/different time if (count instanceof Array) {
                 //same timeif (typeof time === "number") {

                    if (t> time) t = time; //Judge whether it exceeds the target value for (let i in beginAttr) { //Loop attr, count, assign values ​​separately //Error judgment if (! count [i] && count [i] !== 0) {
                             throw new Error（
                                 "The length of the input value is not equal to the length of the property");
                        }

                        if (flag || attr[i] === "opacity") curVal = Tween[tween](t, beginAttr[i], count[i], time); //Call Tween and return the current attribute value. The calculation method is to move to the write position else curVal = Tween[tween](t, beginAttr[i], count[i] + beginAttr[i], time); //Call Tween and return the current attribute value. The calculation method is to move the write distance if (attr[i] === "opacity") target.style[attr[i]] = curVal; //Assign a value to the attribute else target.style[attr[i]] = curVal + "px" ; //Assign a value to the attribute }

                    if (t < time) requestAnimationFrame (animate); //Judge whether the function has finished the other callbacks && callback(); //If the longest animation has been executed, investigate the callback function return;
                }

                //Different time if (time instanceof Array) {
                     for (let i in beginAttr) {
                         //Error judgment if (!time[i] && time[i] !== 0) {
                             throw new Error（
                                 "The length of input time) is not equal to the length of property");
                        }

                        //Judge whether the animation has been completed. If completed, skip this loop if (parseFloat (getComputedStyle (target) [attr [i]]) === (typeof value === "number"? value: value [i]))
                             continue;

                        if (t> time[i]) t = time[i]; //Judge whether it exceeds the target value //Error judgment if (! count[i] && count[i] !== 0) {
                             throw new Error（
                                 "The length of the input value is not equal to the length of the property");
                        }

                        if (flag || attr[i] === "opacity") curVal = Tween[tween](t, beginAttr[i], count[i], time[i]); //Call Tween and return the current attribute value. The calculation method is to move to the written position else curVal = Tween[tween](t, beginAttr[i], count[i] + beginAttr[i], time[i]); //Call Tween and return the current attribute value. The calculation method is to move the written distance if (attr[i] === "opacity") target.style[attr[i]] = curVal;
                        Otherwise target.style[attr[i]] = curVal + "px";
                    }

                    if (t < Math.max(... time)) requestAnimationFrame(animate);
                    else callback && callback();
                    return;
                }
            }

        }

        //Single motion mode if (t> time) t = time;
        if (flag || attr === "opacity") curVal = Tween [tween] (t, beginAttr, count, time); //Call Tween and return the current attribute value. The calculation method is to move to the write position else curVal = Tween [tween] (t, beginAttr [i], count + beginAttr, time); //Call Tween and return the current attribute value. The calculation method is to move the write distance if (attr === "opacity") target.style [attr] = curVal;
        Otherwise target.style[attr] = curVal + "px";

        if (t < time) requestAnimationFrame(animate);
        else callback && callback();

    }

    requestAnimationFrame(animation);
    Return parameter; //Return object for interruption or other purposes}
//Tween.js 
/ *
 * t: elapsed time * b: start value * c: total movement value * d: duration *
 *Equation of the curve*
 * http://www.cnblogs.com/bluedream2009/archive/2010/06/19/1760909.html
 * * /

Let Tween = {
     linear: function (t, b, c, d) { // uniform speed returns c * t / d + b;
    },
    easeIn: function (t, b, c, d) { // acceleration curve return c * (t /= d) * t + b;
    },
    easeOut: function (t, b, c, d) { // deceleration curve return -c * (t /= d) * (t - 2) + b;
    },
    easeBoth: function (t, b, c, d) { // acceleration and deceleration curve if ((t / = d / 2) < 1) {
             return c / 2 * t * t + b;
        }
        return -c/2*((-t)*(t-2)-1)+b;
    },
    easeInStrong: function (t, b, c, d) { // acceleration curve return c * (t /= d) * t * t * t + b;
    },
    easeOutStrong: function (t, b, c, d) { // easeOut curve return -c * ((t = t / d - 1) * t * t * t - 1) + b;
    },
    easeBothStrong: function (t, b, c, d) { //acceleration and deceleration line if ((t / = d / 2) < 1) {
             return c / 2 * t * t * t * t + b;
        }
        return -c/2*((t-=2)*t*t*t-2)+b;
    },
    elasticIn: function (t, b, c, d, a, p) { // Sine attenuation curve (elastic in gradually)
        if (t === 0) {
             return b;
        }
        if ((t /= d) == 1) {
             return b + c;
        }
        if (!p) {
            p = d * 0.3 ;
        }
        if (!a || a < Math.abs(c)) {
            a = c;
            var s = p / 4 ;
        } else {
             var s = p / (2 * Math.PI) * Math.asin(c/a);
        }
        return - (A * math.pow(2, 10 * (T - = 1)) * math.sin((T * d - S) * (2 * math.PI) / P)) + B;
    },
    elasticOut: function (t, b, c, d, a, p) { // Sine enhancement curve (elastic out)
        if (t === 0) {
             return b;
        }
        if ((t /= d) == 1) {
             return b + c;
        }
        if (!p) {
            p = d * 0.3 ;
        }
        if (!a || a < Math.abs(c)) {
            a = c;
            var s = p / 4 ;
        } else {
             var s = p / (2 * Math.PI) * Math.asin(c/a);
        }
        return a * Math.pow(2, -10*t) * Math.sin((t*d - s) * (2*Math.PI) / p) + c + b;
    },
    elasticBoth: function(t, b, c, d, a, p) {
         if (t === 0) {
             return b;
        }
        if ((t/=d/2) == 2) {
             return b + c;
        }
        if (!p) {
            p = d * (0.3 * 1.5);
        }
        if (!a || a < Math.abs(c)) {
            a = c;
            var s = p / 4 ;
        } else {
             var s = p / (2 * Math.PI) * Math.asin(c/a);
        }
        if (T < 1) {
             Returns -0.5 * (A * math.pow(2, 10 * (T - = 1)) *
                 math.sin((T * d - S) * (2 * math.PI) / p)) + b;
        }
        Returns a * Math.pow(2, -10 * (t - = 1)) *
             Math.sin((t*d - s)*(2*Math.PI)/p)*0.5+c+b;
    },
    backIn: function (t, b, c, d, s) { // Backward acceleration (backward gradual entry)
        if (typeof s == 'undefined') {
            s = 1.70158 ;
        }
        return c*(t/=d)*t*((s+1)*t-s)+b;
    },
    backOut: function (t, b, c, d, s) {
         if (typeof s == 'undefined') {
            s = 3.70158; //Retraction distance}
        return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;
    },
    backBoth: function(t, b, c, d, s) {
         if (typeof s == 'undefined') {
            s = 1.70158 ;
        }
        if ((t/=d/2) < 1) {
             return c/2*(t*t*(((s*=(1.525))+1)*t-s))+b;
        }
        return c/2*((t-=2)*t*(((s*=(1.525))+1)*t+s)+2)+b;
    },
    bounceIn: function (t, b, c, d) { // The ball gradually fades out)
        return c - Tween['bounceOut'](d - t, 0, c, d) + b;
    },
    bounceOut: function(t, b, c, d) {
         if ((t/=d) < (1/2.75)) {
             return c * (7.5625 * t * t) + b;
        } else if (t < (2/2.75)) {
             return c*(7.5625*(t - =(1.5/2.75))*t+0.75)+b;
        } else if (t < (2.5 / 2.75)) {
             return c*(7.5625*(t - =(2.25/2.75))*t+0.9375)+b;
        }
        return c*(7.5625*(t - =(2.625/2.75))*t+0.984375)+b;
    },
    bounceBoth: function(T, B, C, D) {
         if (T < d / 2) {
             return tween['bounceIn'](T*2, 0, C, D)*0.5 + B;
        }
        return Tween['bounceOut'](t*2-d,0,c,d)*0.5+c*0.5+b;
    }
}


// ------------------------------------------- DOM Operations --- ------------------------------------------------ 
//Add node//ele: parent node, supports input variables, id values, class values, and label values. Except for variables, other values ​​must be strings //Node: added label name, value is a string //n: number of nodes added //className: class name bound to the node, value is a string, multiple class names are separated by spaces //Boolean: whether to select all target parent nodes. Optional parameter. If not entered, it will be judged as false, and only the first selected node will be matched. Function addChild (ele, node, n, className, boolean) {
     //Get the node let parent = null;

    if (typeof ele !== "string") parent = ele;
    else if (ele[0] === "#") parent = document.getElementById(ele.slice(1));
    else if (ele[0] === ".") {
         if (boolean === false) parent = document.getElementsByClassName(ele.slice(1))[0];
        else parent = document.getElementsByClassName(ele.slice(1));
    } else {
         if (boolean === false) parent = docuemnt.getElementsByTagName(ele)[0];
        else parent = document.getElementsByTagNameNS(ele);
    }

    //Declare objects used to store parent nodes and child nodes const obj = {
         "parent": parent,
         "children": []
    };

    //Add node if (boolean) {
         for (let i = 0; i < parent.length; i++) {
             //Create container fragment const fragment = document.createDocumentFragment();
            //Save child nodes for return value obj.children[i] = [];

            for (let j = 0; j < n; j++) {
                 const target = document.createElement(node);
                target.className = className;
                fragment.appendChild(target);
                //Add child nodes to the array for return value obj.children[i][j] = target;
            }

            Parent[I].appendChild(fragment)
        }
    } else {
         //Create fragment container const fragment = document.createDocumentFragment();

        for (let i = 0; i < n; i++) {
             const target = document.createElement(node);
            target.className = className;
            fragment.appendChild(target);
            //Add child nodes for return value obj.children[i] = target;
        }
        //Add the fragment container to the parent node at one time parent.appendChild(fragment);
    }

    //Return parameter for animation function to call return obj;
}

#sky .star {
      position:absolute;
     opacity: 0;
     z-index: 10000;
 }
 
 .star :: after {
      content: "";
     display:block;
     Boundary: solid;
     border-width: 2px 0 2px 80px ;
     /*The meteor gradually decreases in length*/ 
     border-color: transparent transparent transparent rgba(255,255,255,1);
     border-radius: 2px 0 0 2px ;
     transform: rotate(-45deg);
     transform-origin: 0 0 0 ;
     box-shadow: 0 0 20px rgba(255,255,255,.3);
 }

setInterval(function() {
     const obj = addChild("#sky","div",2,"star"); //Insert shooting star for(let i = 0; i < obj.children.length; i++) {
         //random position const top = -50 + Math.random() * 200 + "px",
            left = 200 + Math.random() * 1200 + "px",
            scale = 0.3 + Math.random() * 0.5;
        const timer = 1000 + Math.random()*1000;

        obj.children[i].style.top = top;
        obj.children[i].style.left = left;
        obj.children[i].style.transform = `scale(${scale})`;
        
        //Add animation requestAnimation({
            ele: obj.children[i],
             attr: ["top", "left", "opacity"],
             Values: [150, -150, .8],
             time：timer，
             flag: false,
             fn: function() {
                requestAnimation({
                    ELE: obj.children[I],
                     attr:["top","left","opaque"],
                     Values: [150, -150, 0],
                     Time: timer,
                     Flag: false,
                     fn:() => {
                        obj.parent.removeChild(obj.children[I]); //Delete node at the end of animation}
                })
            }
        });
    }

}, 1000);