CSS 、JS实现浪漫流星雨动画

网页制作 2024/11/16 佚名

3 2 1

1，效果图

2，源码

HTML

< 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 >

CSS

/*  -  -  -  -  -  - 重启 -  -  -  -  -  -  */
 
 * {
     保证金：0 ;
     填充：0 ;
 }
 
 html，
  body {
      width：100％ ;
     最小宽度：1000px ;
     身高：100％ ;
     最小高度：400px ;
     溢出：隐藏;
 }

 / * ------------画布------------ * / 
 .container {
      position：relative;
     身高：100％ ;
 }
 / *遮罩层* /
 
 #mask {
      position：absolute;
     宽度：100％ ;
     身高：100％ ;
     background：rgba（0,0,0，.8）;
     z-index：900 ;
 }
 / *天空背景* /
 
 #sky {
      width：100％ ;
     身高：100％ ;
     background：线性渐变（rgba（0,150,255,1），rgba（0,150,255，.8），rgba（0,150,255，.5））;
 }
 / *月亮* /
 
 #moon {
      position：absolute;
     上：50px ;
     右：200px ;
     宽度：120px ;
     身高：120px ;
     背景：rgba（251,255,25,0.938）;
     border-radius：50％ ;
     box-shadow：0  0  20px  rgba（251,255,25,0.5）;
     z-index：9999 ;
 }
 / *闪烁星星* /
 
 .blink {
      position：absolute;
     background：rgb（255,255,255）;
     border-radius：50％ ;
     box-shadow：0  0  5px  rgb（255,255,255）;
     不透明度：0 ;
     z-index：10000 ;
 }
 / *流星* /
 
 .star {
      position：absolute;
     不透明度：0 ;
     z-index：10000 ;
 }
 
 .star :: after {
      content：“” ;
     显示：块;
     边界：坚固;
     border-width：2px  0  2px  80px ;
     / *流星随长度逐渐缩小* / 
     border-color：透明透明透明rgba（255,255,255,1）;
     border-radius：2px  0  0  2px ;
     transform：rotate（-45deg）;
     transform-origin：0  0  0 ;
     盒子阴影：0  0  20px  rgba（255,255,255，.3）;
 }
 / *云* /
 
 .cloud {
      position：absolute;
     宽度：100％ ;
     身高：100px ;
 }
 
 .cloud-1 {
      bottom： - 100px ;
     z-index：1000 ;
     不透明度：1 ;
     变换：规模（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 ;
     底部： - 50px ;
     z-index：999 ;
     不透明度：。5 ;
     变换：旋转（7deg）;
     -webkit-transform：rotate（7deg）;
     -moz-transform：rotate（7deg）;
     -ms-transform：rotate（7deg）;
     -o-transform：rotate（7deg）;
 }
 
 .cloud-3 {
      left：120px ;
     底部： - 50px ;
     z-index：999 ;
     不透明度：。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％ ;
     背景：#fff ;
 }
 
 .circle-1 {
      width：100px ;
     身高：100px ;
     上： - 50px ;
     左：10px ;
 }
 
 .circle-2 {
      width：150px ;
     身高：150px ;
     上： - 50px ;
     左：30px ;
 }
 
 .circle-3 {
      width：300px ;
     身高：300px ;
     上： - 100px ;
     左：80px ;
 }
 
 .circle-4 {
      width：200px ;
     身高：200px ;
     上： - 60px ;
     左：300px ;
 }
 
 .circle-5 {
      width：80px ;
     身高：80px ;
     上： - 30px ;
     左：450px ;
 }
 
 .circle-6 {
      width：200px ;
     身高：200px ;
     上： - 50px ;
     左：500px ;
 }
 
 .circle-7 {
      width：100px ;
     身高：100px ;
     上： - 10px ;
     左：650px ;
 }
 
 .circle-8 {
      width：50px ;
     身高：50px ;
     上：30px ;
     左：730px ;
 }
 
 .circle-9 {
      width：100px ;
     身高：100px ;
     上：30px ;
     左：750px ;
 }
 
 .circle-10 {
      width：150px ;
     身高：150px ;
     上：10px ;
     左：800px ;
 }
 
 .circle-11 {
      width：150px ;
     身高：150px ;
     上： - 30px ;
     左：850px ;
 }
 
 .circle-12 {
      width：250px ;
     身高：250px ;
     上： - 50px ;
     左：900px ;
 }
 
 .circle-13 {
      width：200px ;
     身高：200px ;
     上： - 40px ;
     左：1000px ;
 }
 
 .circle-14 {
      width：300px ;
     身高：300px ;
     上： - 70px ;
     左：1100px ;
 }

//流星动画 
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” ]，
             值：[ 150，-150，.8 ]，
             time：timer，
             flag：false，
             fn：function（） {
                requestAnimation（{
                    ELE：obj.children [I]，
                     ATTR：“顶”，“左”，“不透明” ]，
                     值：[ 150，-150，0 ]，
                     时间：定时器，
                     标志：假，
                     FN：（） => {
                        obj.parent.removeChild（obj.children [I]）;
                    }
                }）
            }
        }）;
    }

}，1000）;

//闪烁星星动画 
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”，
             值：.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）;

//月亮移动
requestAnimation（{
    ele：“＃moon”，
     attr：“right”，
     值：1200，
     时间：10000000，
}）;


//添加云
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} `）;
    }
}
//云动画

let flag = 1 ;
的setInterval（
    功能（） {
         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
                    }）
                }
            }）;
        }

        标志++;
    }，2000）

封装方法

// -------------------------------------------动画---- ----------------------------------------------- 
//运动动画，调用Tween.js 
// ele：dom | 班级| id | 标签节点| 类名| id名| 标签名，只支持选择一个节点，类类名以及标签名只能选择页面中第一个
// attr：属性属性名
//值：目标值目标值
//时间：持续时间持续时间
//补间：定时function函数方程
// flag：Boolean判断是按值移动还是按位置移动，默认按位置移动
// fn：callback回调函数
//增加返回值：将内部参数对象返回，可以通过设置返回对象的属性stop为true打断动画
函数 requestAnimation（obj） {
     // -------------------------------------参数设置--------------------------------------------- 
    //默认属性
    const参数= {
         ele：null，
         attr：null，
         value：null，
         time：1000，
         tween：“linear”，
         flag：true，
         stop：false，
         fn：“”
    }

    //合并传入属性
    Object .assign（parameter，obj）; //覆盖重名属性

    // -------------------------------------动画设置--------- ------------------------------------ 
    //创建运动方程初始参数，方便复用
    let start = 0 ; //用于保存初始时间戳
    let target =（typeof parameter.ele === “string”？document .querySelector（parameter.ele）：parameter.ele），//目标节点 
        attr = parameter.attr，//目标属性 
        beginAttr = parseFloat（getComputedStyle（target）[attr]），// attr起始值 
        value = parameter.value，//运动目标值 
        count = value  -  beginAttr，//实际运动值 
        time = parameter.time，//运动持续时间，
        tween = parameter.tween，//运动函数
        flag = parameter.flag，
        callback = parameter.fn，//回调函数 
        curVal = 0 ; //运动当前值

    //判断传入函数是否为数组，多段运动 
    （function（） {
         if（attr instanceof  Array）{
            beginAttr = [];
            count = [];
            对于（让我的 ATTR）{
                 常量 VAL = parseFloat（的getComputedStyle（目标）[I]）;
                beginAttr.push（VAL）;
                count.push（value  -  val）;
            }
        }
        if（value instanceof  Array）{
             for（let i in value）{
                count [i] = value [i]  -  beginAttr [i];
            }
        }
    }）（）;

    //运动函数
    功能 动画（时间戳） {
         如果（parameter.stop）返回 ; //打断
        //存储初始时间戳
        if（！start）start = timestamp;
        //已运动时间
        让 t =时间戳 - 开始;
        //判断多段运动
        if（beginAttr instanceof  Array）{
             // const len = beginAttr.length //存数组长度，复用

            //多段运动第1类 - 多属性，同目标，同时间/不同时间
            if（typeof count === “number”）{ //同目标
                //同时间
                if（typeof time === “number”）{
                     if（t> time）t = time; //判断是否超出目标值

                    //循环attr，分别赋值
                    为（let i in beginAttr）{
                         if（flag）curVal = Tween [tween]（t，beginAttr [i]，count，time）; //调用Tween，返回当前属性值，此时计算方法为移动到
                        写入位置else curVal = Tween [tween]（t，beginAttr [i]，count + beginAttr [i]，time）; //调用Tween，返回当前属性值，此时计算方法为移动了
                        写入距离if（attr [i] === “opacity”）target.style [attr [i]] = curVal; //给属性赋值
                        else target.style [attr [i]] = curVal + “px” ; //给属性赋值

                        if（t <time）requestAnimationFrame（animate）; //判断是否运动完
                        其他回调&& callback（）; //调用回调函数
                    }
                    回归 ;
                }

                //不同时间
                if（time instanceof  Array）{
                     //循环时间，attr，分别赋值
                    为（让我在 beginAttr中）{
                         //错误判断
                        if（！time [i] && time [i]！== 0）{
                             throw  new  Error（
                                 “输入时间的长度不等于属性的长度”）;
                        }

                        //判断是否已经完成动画，完成则跳过此次循环
                        if（parseFloat（getComputedStyle（target）[attr [i]]）===（typeof value === “number”？value：value [i]） ）
                             继续 ;
                        // t =时间戳 - 开始; //每次循环初始化t 
                        if（t> time [i]）t = time [i]; //判断是否超出目标值

                        if（flag || attr [i] === “opacity”）curVal = Tween [tween]（t，beginAttr [i]，count，i）; //调用Tween，返回当前属性值，此时计算方法为移动到
                        写入位置else curVal = Tween [tween]（t，beginAttr [i]，count + beginAttr [i]，i）; //调用Tween，返回当前属性值，此时计算方法为移动了
                        写入距离if（attr [i] === “opacity”）target.style [attr [i]] = curVal; //给属性赋值
                        else target.style [attr [i]] = curVal + “px” ; //给属性赋值
                    }

                    if（t < Math .max（... time））requestAnimationFrame（animate）; //判断函数是否运动完
                    其他回调&& callback（）; //如果已经执行完时间最长的动画，则调查回调函数
                    return ;
                }
            }

            //多段运动第2类 - 多属性，不同目标，同时间/不同时间
            if（count instanceof  Array）{
                 //同时间
                if（typeof time === “number”）{

                    if（t> time）t = time; //判断是否超出目标值

                    for（let i in beginAttr）{ //循环attr，count，分别赋值
                        //错误判断
                        if（！count [i] && count [i]！== 0）{
                             throw  new  Error（
                                 “输入值的长度不是等于属性的长度“）;
                        }

                        if（flag || attr [i] === “opacity”）curVal = Tween [tween]（t，beginAttr [i]，count [i]，time）; //调用Tween，返回当前属性值，此时计算方法为移动到
                        写入位置else curVal = Tween [tween]（t，beginAttr [i]，count [i] + beginAttr [i]，time）; //调用Tween，返回当前属性值，此时计算方法为移动了
                        写入距离if（attr [i] === “opacity”）target.style [attr [i]] = curVal; //给属性赋值
                        else target.style [attr [i]] = curVal + “px” ; //给属性赋值
                    }

                    if（t <time）requestAnimationFrame（animate）; //判断函数是否运动完
                    其他回调&& callback（）; //如果已经执行完时间最长的动画，则调查回调函数
                    return ;
                }

                //不同时间
                if（time instanceof  Array）{
                     for（let i in beginAttr）{
                         //错误判断
                        if（！time [i] && time [i]！== 0）{
                             throw  new  Error（
                                 “输入时间的长度）不等于属性的长度“）;
                        }

                        //判断是否已经完成动画，完成则跳过此次循环
                        if（parseFloat（getComputedStyle（target）[attr [i]]）===（typeof value === “number”？value：value [i]） ）
                             继续 ;

                        if（t> time [i]）t = time [i]; //判断是否超出目标值

                        //错误判断
                        if（！count [i] && count [i]！== 0）{
                             throw  new  Error（
                                 “输入值的长度不等于属性的长度”）;
                        }

                        if（flag || attr [i] === “opacity”）curVal = Tween [tween]（t，beginAttr [i]，count [i]，time [i]）; //调用Tween，返回当前属性值，此时计算方法为移动到
                        写入位置其他 curVal = Tween [tween]（t，beginAttr [i]，count [i] + beginAttr [i]，time [i]） ; //调用Tween，返回当前属性值，此时计算方法为移动了
                        写入距离if（attr [i] === “opacity”）target.style [attr [i]] = curVal;
                        否则 target.style [attr [i]] = curVal + “px” ;
                    }

                    if（t < Math .max（... time））requestAnimationFrame（animate）;
                    else callback && callback（）;
                    回归 ;
                }
            }

        }

        //单运动模式
        if（t> time）t = time;
        if（flag || attr === “opacity”）curVal = Tween [tween]（t，beginAttr，count，time）; //调用Tween，返回当前属性值，此时计算方法为移动到
        写入位置else curVal = Tween [tween]（t，beginAttr [i]，count + beginAttr，time）; //调用Tween，返回当前属性值，此时计算方法为移动了
        写入距离if（attr === “opacity”）target.style [attr] = curVal;
        否则 target.style [attr] = curVal + “px” ;

        if（t <time）requestAnimationFrame（animate）;
        else callback && callback（）;

    }

    requestAnimationFrame（动画）;
    返回参数; //返回对象，供打断或其他用途
}
//Tween.js 
/ *
 * t：时间已过时间
 * b：开始起始值
 * c：计算总的运动值
 * d：持续时间持续时间
 *
 *曲线方程
 *
 * http://www.cnblogs.com/bluedream2009/archive/2010/06/19/1760909.html
 * * /

让 Tween = {
     linear：function（t，b，c，d） { //匀速
        返回 c * t / d + b;
    }，
    easeIn：function（t，b，c，d） { //加速曲线
        return c *（t / = d）* t + b;
    }，
    easeOut：function（t，b，c，d） { //减速曲线
        return -c *（t / = d）*（t  - 2）+ b;
    }，
    easeBoth：function（t，b，c，d） { //加速减速曲线
        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） { //加加速曲线
        return c *（t / = d）* t * t * t + b;
    }，
    easeOutStrong：function（t，b，c，d） { //减减曲线
        返回 -c *（（t = t / d  - 1）* t * t * t  - 1）+ b;
    }，
    easeBothStrong：function（t，b，c，d） { //加速减减速线
        如果（（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） { //正弦衰减曲线（弹动渐入）
        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）;
        }
        返回 - （A * 数学 .pow（2，10 *（T - = 1））* 数学 .sin（（T * d - S）*（2 * 数学 .PI）/ P））+ B;
    }，
    elasticOut：function（t，b，c，d，a，p） { //正弦增强曲线（弹动渐出）
        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）;
        }
        返回 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）;
        }
        如果（T < 1）{
             返回 -0.5 *（A * 数学 .pow（2，10 *（T - = 1））*
                 数学 .sin（（T * d - S）*（2 * 数学 .PI）/ p））+ b;
        }
        返回 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） { //回退加速（回退渐入）
        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 ; //回缩的距离
        }
        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） { //弹球渐出）
        返回 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：函数（T，B，C，d） {
         如果（T <d / 2）{
             返回吐温[ '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操作--- ------------------------------------------------ 
//添加节点
// ele：父节点，支持输入变量，id值，类值，标签值。除变量外，其余值必须为字符串
//节点：添加的标签名，值为字符串
// n：节点添加个数
// className：节点绑定的类名，值为字符串，多个类名用空格隔开
//布尔：是否选中所有目标父节点。可选参数，不输入则判定为false，则只匹配选中的第一个节点
函数 addChild（ele，node，n，className，boolean） {
     //获取节点
    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）;
    }

    //声明用于存储父节点及子节点的对象
    const obj = {
         “parent”：parent，
         “children”：[]
    };

    //添加节点
    if（boolean）{
         for（let i = 0 ; i <parent.length; i ++）{
             //创建容器碎片
            const fragment = document .createDocumentFragment（）;
            //保存子节点，用于返回值
            obj.children [i] = [];

            for（let j = 0 ; j <n; j ++）{
                 const target = document .createElement（node）;
                target.className = className;
                fragment.appendChild（目标）;
                //添加子节点到数组，用于返回值
                obj.children [i] [j] =目标;
            }

            父[I] .appendChild（片段）
        }
    } else {
         //创建碎片容器
        const fragment = document .createDocumentFragment（）;

        for（let i = 0 ; i <n; i ++）{
             const target = document .createElement（node）;
            target.className = className;
            fragment.appendChild（目标）;
            //添加子节点，用于返回值
            obj.children [i] =目标;
        }
        //将碎片容器一次性添加到父节点
        parent.appendChild（片段）;
    }

    //返回参数，供动画函数调用
    return obj;
}

3，案例解析

HTML

由于节点很多，并且我想尽量做得逼真有趣有点，还给节点加了随机位置。所以节点的输出都是用JS控制的，HTML这边只写了几个父元素盒子，加上相应的ID名和类类名，结构相对简单。

CSS

CSS部分的难点就是流星的样式和用圈圈画云层，然后将云层堆叠出立体效果。

首先说一下流星的样式：

#sky  .star {
      position：absolute;
     不透明度：0 ;
     z-index：10000 ;
 }
 
 .star :: after {
      content：“” ;
     显示：块;
     边界：坚固;
     border-width：2px  0  2px  80px ;
     / *流星随长度逐渐缩小* / 
     border-color：透明透明透明rgba（255,255,255,1）;
     border-radius：2px  0  0  2px ;
     transform：rotate（-45deg）;
     transform-origin：0  0  0 ;
     盒子阴影：0  0  20px  rgba（255,255,255，.3）;
 }

先提取了公共样式，添加定位属性;

然后在星后通过后伪类添加流星，用边界特性画：

1）模型绘制：border-width的顺序为四边top，right，bottom，left，同理border-color的顺序也为四边top，right，bottom，left。这样将border-width与border-color一一对应后，就能看出2px的是流星的宽度，80px是流星的长度，而0像素流星就是尾巴的这样就形成了一个。头部2px的宽，尾部0像素，长度80px的流星模型 ;

2）稍微逼真：通过边界半径？给流星的头部增加个圆角，让它看起来更逼真最后通过roteta旋转一个角度，让它看起来像是往下掉;

3）增加闪光：通过箱阴影给流星增加一点光晕，让它看起来有闪光的效果;

通过以上3步，一个流星就画好了。

然后是画云：

因为云的代码比较长，这里就不贴出来了方法无非是通过一个一个的圆，相互叠加覆盖，完成一个云朵的形状。
完成一个云层之后，copy一个，然后多个云层通过rotate，opacity，left定位等，做出一个渐隐叠加的立体效果;

JS部分以流星举例说明

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” ]，
             值：[ 150，-150，.8 ]，
             time：timer，
             flag：false，
             fn：function（） {
                requestAnimation（{
                    ELE：obj.children [I]，
                     ATTR：“顶”，“左”，“不透明” ]，
                     值：[ 150，-150，0 ]，
                     时间：定时器，
                     标志：假，
                     FN：（） => {
                        obj.parent.removeChild（obj.children [I]）; //动画结束删除节点
                    }
                }）
            }
        }）;
    }

}，1000）;

这里边用到了我自己封装的两个方法，一个是基于requestAnimationFrame的requestAnimation，以及基于appendChild的addChild。

为了达成星星位置随机的效果，通过定时器的setInterval的不停插入与删除流星：

首先，每次添加2个流星到页面，但是定时器的间隔时间小于流星的动画时间，这样就能保证页面中的流星的数量不是一个固定值，但肯定是大于2的。不然一次2个流星略显冷清;

然后，通过对循环（也可以用为式，换的，都行。对于-的最简单）给每个新添加到页面中的流星一个随机的位置（顶部，左侧），随机的大小（规模），随机的动画执行时间（定时器）;

最后，在用于循环中，给每个新添加到页面中的流星加上动画，并通过回调函数在执行完动画后删除节点。这里要注意的是，要动画分成两个阶段（出现与消失，主要是opacity控制）。另外我这里的处理，每个流星都移动相同的距离300px，这个距离我觉得也可以通过随机数控制，但我犯了个懒，就没有做。

4，小问题

目前我发现的问题有2个：

一是DOM操作本身的问题页面不停的添加与删除节点，造成不停地。回流与重绘，很耗性能;

二是requestAnimationFrame本身的问题因为定时器不断在添加节点，而requestAnimationFrame的特性- 当离开当前页面去浏览其他页面时，动画会暂停。这就造成了一个问题，节点一直在加，但动画全在停那没有执行那么下次再回到这个页面的时候，就吊杆!!!动画就炸了，你会看到画面一卡，很多小蝌蚪集体出动去找妈妈。

5，结语

这个小案例虽然从难度上来看很简单，但是它可拓展性很高 - 比如表个白啊，寄个相思，耍个浪漫啊等等，用纯CSS也可以实现。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

CSS,JS,流星雨动画

标签：

CSS,JS,流星雨动画

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

岱庙资源网 Copyright www.zgmyg.com

评论“CSS 、JS实现浪漫流星雨动画”

CSS 、JS实现浪漫流星雨动画

暂无“CSS 、JS实现浪漫流星雨动画”评论...

www.zgmyg.com 岱庙资源网

129,905影音资源

244,626技术资源

111,817软件资源

578,645站长资源

CSS 、JS实现浪漫流星雨动画

CSS,JS,流星雨动画

纯CSS表头固定的实现代码

CSS未知高度垂直居中的实现

评论“CSS 、JS实现浪漫流星雨动画”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

CSS 、JS实现浪漫流星雨动画

CSS,JS,流星雨动画

纯CSS表头固定的实现代码

CSS未知高度垂直居中的实现

评论“CSS 、JS实现浪漫流星雨动画”

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存