CSS+JS如何实现浪漫流星雨动画效果？（代码示例）-tutorial css-php.cn

Rumah

hujung hadapan web

tutorial css

CSS+JS如何实现浪漫流星雨动画效果？（代码示例）

青灯夜游

Nov 10, 2018 pm 05:16 PM

css javascript animasi

本篇文章给大家带来的内容是介绍CSS+JS如何实现浪漫流星雨动画效果？（代码示例）。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。

首先我们来看看效果图：

下面我们来看看如何实现：

HTML代码：

< body > 
    < p  class = “container” > 
        < p  id = “mask” > </ p > 
        < p  id = “sky” > </ p > 
        < p  id = “moon” > </ p > 
        < p  id = “stars” > </ p > 
        < p  class = “cloud cloud-1” ></ p > 
        <p  class = “cloud cloud-2” > </ p > 
        < p  class = “cloud cloud-3” > </ p > 
    </ p > 
</ body >

Salin selepas log masuk

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

Salin selepas log masuk

JS代码：

//流星动画 
setInterval（function（） {
     const obj = addChild（“#sky”，“p”，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”，“p”，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”，“p”，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）

Salin selepas log masuk

封装方法：

// -------------------------------------------动画---- ----------------------------------------------- 
//运动动画，调用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 == &#39;undefined&#39;）{
            s = 1.70158 ;
        }
        return c *（t / = d）* t *（（s + 1）* t  -  s）+ b;
    }，
    backOut：function（t，b，c，d，s） {
         if（typeof s == &#39;undefined&#39;）{
            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 == &#39;undefined&#39;）{
            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 [ &#39;bounceOut&#39; ]（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）{
             返回吐温[ &#39;bounceIn&#39; ]（T * 2，0，C，d）* 0.5 + B;
        }
        return Tween [ &#39;bounceOut&#39; ]（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;
}

Salin selepas log masuk

案例解析

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）;
 }

Salin selepas log masuk

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

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

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”，“p”，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）;

Salin selepas log masuk

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

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

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

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

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

小问题

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

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

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

结语

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

Atas ialah kandungan terperinci CSS+JS如何实现浪漫流星雨动画效果？（代码示例）. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Tunjukkan Lagi

Artikel Panas

Assassin's Creed Shadows: Penyelesaian Riddle Seashell

4 minggu yang lalu By DDD

Apa yang Baru di Windows 11 KB5054979 & Cara Memperbaiki Masalah Kemas Kini

3 minggu yang lalu By DDD

Di mana untuk mencari kad kunci kawalan kren di atomfall

4 minggu yang lalu By DDD

<🎜>: Rails Dead - Cara Melengkapkan Setiap Cabaran

1 bulan yang lalu By DDD

Panduan Atomfall: Lokasi Item, Panduan Pencarian, dan Petua

1 bulan yang lalu By DDD

Tunjukkan Lagi

Alat panas

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Tunjukkan Lagi

Topik panas

Di manakah pintu masuk log masuk untuk e-mel gmail?

7698

Tutorial Java

1640

Tutorial CakePHP

1393

Tutorial Laravel

1287

Tutorial PHP

1229

Tunjukkan Lagi

Related knowledge

Cara menggunakan bootstrap di vue Apr 07, 2025 pm 11:33 PM

Menggunakan bootstrap dalam vue.js dibahagikan kepada lima langkah: Pasang bootstrap. Import bootstrap di main.js. Gunakan komponen bootstrap secara langsung dalam templat. Pilihan: Gaya tersuai. Pilihan: Gunakan pemalam.

Peranan HTML, CSS, dan JavaScript: Tanggungjawab Teras Apr 08, 2025 pm 07:05 PM

HTML mentakrifkan struktur web, CSS bertanggungjawab untuk gaya dan susun atur, dan JavaScript memberikan interaksi dinamik. Ketiga melaksanakan tugas mereka dalam pembangunan web dan bersama -sama membina laman web yang berwarna -warni.

Cara Menulis Garis Pecah Di Bootstrap Apr 07, 2025 pm 03:12 PM

Terdapat dua cara untuk membuat garis perpecahan bootstrap: menggunakan tag, yang mewujudkan garis perpecahan mendatar. Gunakan harta sempadan CSS untuk membuat garis perpecahan gaya tersuai.

Memahami HTML, CSS, dan JavaScript: Panduan Pemula Apr 12, 2025 am 12:02 AM

WebDevelopmentReliesOnhtml, CSS, andjavascript: 1) HtmlStructuresContent, 2) CSSStylesit, dan3) JavaScriptaddsInteractivity, Formingthebasisofmodernwebexperiences.

Cara memasukkan gambar di bootstrap Apr 07, 2025 pm 03:30 PM

Terdapat beberapa cara untuk memasukkan imej dalam bootstrap: masukkan imej secara langsung, menggunakan tag HTML IMG. Dengan komponen imej bootstrap, anda boleh memberikan imej yang responsif dan lebih banyak gaya. Tetapkan saiz imej, gunakan kelas IMG-cecair untuk membuat imej boleh disesuaikan. Tetapkan sempadan, menggunakan kelas IMG-Sempadan. Tetapkan sudut bulat dan gunakan kelas IMG-bulat. Tetapkan bayangan, gunakan kelas bayangan. Saiz semula dan letakkan imej, menggunakan gaya CSS. Menggunakan imej latar belakang, gunakan harta CSS imej latar belakang.

Cara Menyiapkan Kerangka untuk Bootstrap Apr 07, 2025 pm 03:27 PM

Untuk menubuhkan rangka kerja bootstrap, anda perlu mengikuti langkah -langkah ini: 1. Rujuk fail bootstrap melalui CDN; 2. Muat turun dan tuan rumah fail pada pelayan anda sendiri; 3. Sertakan fail bootstrap di HTML; 4. Menyusun sass/kurang seperti yang diperlukan; 5. Import fail tersuai (pilihan). Setelah persediaan selesai, anda boleh menggunakan sistem grid Bootstrap, komponen, dan gaya untuk membuat laman web dan aplikasi yang responsif.

Cara menggunakan butang bootstrap Apr 07, 2025 pm 03:09 PM

Bagaimana cara menggunakan butang bootstrap? Perkenalkan CSS bootstrap untuk membuat elemen butang dan tambahkan kelas butang bootstrap untuk menambah teks butang

Cara mengubah saiz bootstrap Apr 07, 2025 pm 03:18 PM

Untuk menyesuaikan saiz unsur-unsur dalam bootstrap, anda boleh menggunakan kelas dimensi, yang termasuk: menyesuaikan lebar: .col-, .w-, .mw-adjust ketinggian: .h-, .min-h-, .max-h-

See all articles