当前位置：Gxlcms > css > CSS+JS如何实现浪漫流星雨动画效果？（代码示例）

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

时间：2021-07-01 10:21:17 帮助过：52人阅读

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

首先我们来看看效果图：

1.gif

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

HTML代码：

  1. < body > 
  2.     < p  class = “container” > 
  3.         < p  id = “mask” > </ p > 
  4.         < p  id = “sky” > </ p > 
  5.         < p  id = “moon” > </ p > 
  6.         < p  id = “stars” > </ p > 
  7.         < p  class = “cloud cloud-1” ></ p > 
  8.         <p  class = “cloud cloud-2” > </ p > 
  9.         < p  class = “cloud cloud-3” > </ p > 
  10.     </ p > 
  11. </ body >

CSS代码：

  1. /*  -  -  -  -  -  - 重启 -  -  -  -  -  -  */
  2.  
  3.  * {
  4.      保证金：0 ;
  5.      填充：0 ;
  6.  }
  7.  
  8.  html，
  9.   body {
  10.       width：100％ ;
  11.      最小宽度：1000px ;
  12.      身高：100％ ;
  13.      最小高度：400px ;
  14.      溢出：隐藏;
  15.  }
  16.  / * ------------画布------------ * / 
  17.  .container {
  18.       position：relative;
  19.      身高：100％ ;
  20.  }
  21.  / *遮罩层* /
  22.  
  23.  #mask {
  24.       position：absolute;
  25.      宽度：100％ ;
  26.      身高：100％ ;
  27.      background：rgba（0,0,0，.8）;
  28.      z-index：900 ;
  29.  }
  30.  / *天空背景* /
  31.  
  32.  #sky {
  33.       width：100％ ;
  34.      身高：100％ ;
  35.      background：线性渐变（rgba（0,150,255,1），rgba（0,150,255，.8），rgba（0,150,255，.5））;
  36.  }
  37.  / *月亮* /
  38.  
  39.  #moon {
  40.       position：absolute;
  41.      上：50px ;
  42.      右：200px ;
  43.      宽度：120px ;
  44.      身高：120px ;
  45.      背景：rgba（251,255,25,0.938）;
  46.      border-radius：50％ ;
  47.      box-shadow：0  0  20px  rgba（251,255,25,0.5）;
  48.      z-index：9999 ;
  49.  }
  50.  / *闪烁星星* /
  51.  
  52.  .blink {
  53.       position：absolute;
  54.      background：rgb（255,255,255）;
  55.      border-radius：50％ ;
  56.      box-shadow：0  0  5px  rgb（255,255,255）;
  57.      不透明度：0 ;
  58.      z-index：10000 ;
  59.  }
  60.  / *流星* /
  61.  
  62.  .star {
  63.       position：absolute;
  64.      不透明度：0 ;
  65.      z-index：10000 ;
  66.  }
  67.  
  68.  .star :: after {
  69.       content：“” ;
  70.      显示：块;
  71.      边界：坚固;
  72.      border-width：2px  0  2px  80px ;
  73.      / *流星随长度逐渐缩小* / 
  74.      border-color：透明透明透明rgba（255,255,255,1）;
  75.      border-radius：2px  0  0  2px ;
  76.      transform：rotate（-45deg）;
  77.      transform-origin：0  0  0 ;
  78.      盒子阴影：0  0  20px  rgba（255,255,255，.3）;
  79.  }
  80.  / *云* /
  81.  
  82.  .cloud {
  83.       position：absolute;
  84.      宽度：100％ ;
  85.      身高：100px ;
  86.  }
  87.  
  88.  .cloud-1 {
  89.       bottom： - 100px ;
  90.      z-index：1000 ;
  91.      不透明度：1 ;
  92.      变换：规模（1.5）;
  93.      -webkit-transform：scale（1.5）;
  94.      -moz-transform：scale（1.5）;
  95.      -ms-transform：scale（1.5）;
  96.      -o-transform：scale（1.5）;
  97.  }
  98.  
  99.  .cloud-2 {
  100.       left： - 100px ;
  101.      底部： - 50px ;
  102.      z-index：999 ;
  103.      不透明度：。5 ;
  104.      变换：旋转（7deg）;
  105.      -webkit-transform：rotate（7deg）;
  106.      -moz-transform：rotate（7deg）;
  107.      -ms-transform：rotate（7deg）;
  108.      -o-transform：rotate（7deg）;
  109.  }
  110.  
  111.  .cloud-3 {
  112.       left：120px ;
  113.      底部： - 50px ;
  114.      z-index：999 ;
  115.      不透明度：。1 ;
  116.      transform：rotate（-10deg）;
  117.      -webkit-transform：rotate（-10deg）;
  118.      -moz-transform：rotate（-10deg）;
  119.      -ms-transform：rotate（-10deg）;
  120.      -o-transform：rotate（-10deg）;
  121.  }
  122.  
  123.  .circle {
  124.       position：absolute;
  125.      border-radius：50％ ;
  126.      背景：#fff ;
  127.  }
  128.  
  129.  .circle-1 {
  130.       width：100px ;
  131.      身高：100px ;
  132.      上： - 50px ;
  133.      左：10px ;
  134.  }
  135.  
  136.  .circle-2 {
  137.       width：150px ;
  138.      身高：150px ;
  139.      上： - 50px ;
  140.      左：30px ;
  141.  }
  142.  
  143.  .circle-3 {
  144.       width：300px ;
  145.      身高：300px ;
  146.      上： - 100px ;
  147.      左：80px ;
  148.  }
  149.  
  150.  .circle-4 {
  151.       width：200px ;
  152.      身高：200px ;
  153.      上： - 60px ;
  154.      左：300px ;
  155.  }
  156.  
  157.  .circle-5 {
  158.       width：80px ;
  159.      身高：80px ;
  160.      上： - 30px ;
  161.      左：450px ;
  162.  }
  163.  
  164.  .circle-6 {
  165.       width：200px ;
  166.      身高：200px ;
  167.      上： - 50px ;
  168.      左：500px ;
  169.  }
  170.  
  171.  .circle-7 {
  172.       width：100px ;
  173.      身高：100px ;
  174.      上： - 10px ;
  175.      左：650px ;
  176.  }
  177.  
  178.  .circle-8 {
  179.       width：50px ;
  180.      身高：50px ;
  181.      上：30px ;
  182.      左：730px ;
  183.  }
  184.  
  185.  .circle-9 {
  186.       width：100px ;
  187.      身高：100px ;
  188.      上：30px ;
  189.      左：750px ;
  190.  }
  191.  
  192.  .circle-10 {
  193.       width：150px ;
  194.      身高：150px ;
  195.      上：10px ;
  196.      左：800px ;
  197.  }
  198.  
  199.  .circle-11 {
  200.       width：150px ;
  201.      身高：150px ;
  202.      上： - 30px ;
  203.      左：850px ;
  204.  }
  205.  
  206.  .circle-12 {
  207.       width：250px ;
  208.      身高：250px ;
  209.      上： - 50px ;
  210.      左：900px ;
  211.  }
  212.  
  213.  .circle-13 {
  214.       width：200px ;
  215.      身高：200px ;
  216.      上： - 40px ;
  217.      左：1000px ;
  218.  }
  219.  
  220.  .circle-14 {
  221.       width：300px ;
  222.      身高：300px ;
  223.      上： - 70px ;
  224.      左：1100px ;
  225.  }

JS代码：

  1. //流星动画 
  2. setInterval（function（） {
  3.      const obj = addChild（“#sky”，“p”，2，“star”）;
  4.     for（let i = 0 ; i <obj.children.length; i ++）{
  5.          const top = -50 + Math .random（）* 200 + “px”，
  6.             left = 200 + Math .random（）* 1200 + “px”，
  7.             scale = 0.3 + Math .random（）* 0.5 ;
  8.         const timer = 1000 + Math .random（）* 1000 ;
  9.         obj.children [i] .style.top = top;
  10.         obj.children [i] .style.left = left;
  11.         obj.children [i] .style.transform = `scale（$ {scale}）` ;
  12.         requestAnimation（{
  13.             ele：obj.children [i]，
  14.              attr：[ “top”，“left”，“opacity” ]，
  15.              值：[ 150，-150，.8 ]，
  16.              time：timer，
  17.              flag：false，
  18.              fn：function（） {
  19.                 requestAnimation（{
  20.                     ELE：obj.children [I]，
  21.                      ATTR：“顶”，“左”，“不透明” ]，
  22.                      值：[ 150，-150，0 ]，
  23.                      时间：定时器，
  24.                      标志：假，
  25.                      FN：（） => {
  26.                         obj.parent.removeChild（obj.children [I]）;
  27.                     }
  28.                 }）
  29.             }
  30.         }）;
  31.     }
  32. }，1000）;
  33. //闪烁星星动画 
  34. setInterval（function（） {
  35.      const obj = addChild（“#stars”，“p”，2，“blink”）;
  36.     for（let i = 0 ; i <obj.children.length; i ++）{
  37.          const top = -50 + Math .random（）* 500 + “px”，
  38.             left = 200 + Math .random（）* 1200 + “px”，
  39.             round = 1 + Math .random（）* 2 + “px” ;
  40.         const timer = 1000 + Math .random（）* 4000 ;
  41.         obj.children [i] .style.top = top;
  42.         obj.children [i] .style.left = left;
  43.         obj.children [i] .style.width = round;
  44.         obj.children [i] .style.height = round;
  45.         requestAnimation（{
  46.             ele：obj.children [i]，
  47.              attr：“opacity”，
  48.              值：.5，
  49.              time：timer，
  50.              flag：false，
  51.              fn：function（） {
  52.                 requestAnimation（{
  53.                     ele：obj.children [i]，
  54.                      attr：“opacity”，
  55.                      value：0，
  56.                      time：timer，
  57.                      flag：false，
  58.                      fn：function（） {
  59.                         obj.parent.removeChild（obj.children [I]）;
  60.                     }
  61.                 }）;
  62.             }
  63.         }）;
  64.     }
  65. }，1000）;
  66. //月亮移动
  67. requestAnimation（{
  68.     ele：“＃moon”，
  69.      attr：“right”，
  70.      值：1200，
  71.      时间：10000000，
  72. }）;
  73. //添加云
  74. const clouds = addChild（“。cloud”，“p”，14，“circle”，true）;
  75. for（let i = 0 ; i <clouds.children.length; i ++）{
  76.      for（let j = 0 ; j <clouds.children [i] .length;）{
  77.         clouds.children [i] [j] .classList.add（`circle- $ {++ j} `）;
  78.     }
  79. }
  80. //云动画
  81. let flag = 1 ;
  82. 的setInterval（
  83.     功能（） {
  84.          const clouds = document .querySelectorAll（“。cloud”）;
  85.         const left = Math .random（）* 5 ;
  86.         bottom = Math .random（）* 5 ;
  87.         let timer = 0 ;
  88.         for（let i = 0 ; i <clouds.length; i ++）{
  89.             requestAnimation（{
  90.                 ele：clouds [i]，
  91.                  attr：[ “left”，“bottom” ]，
  92.                  value：flag％2？[-left，-bottom]：[left，bottom]，
  93.                  time：timer + = 500，
  94.                  flag：false，
  95.                  fn：function（） {
  96.                     requestAnimation（{
  97.                         ele：clouds [i]，
  98.                          attr：[ “left”，“bottom” ]，
  99.                          value：flag％2？[left，bottom]：[ -  left，-bottom]，
  100.                          time：timer，
  101.                          flag：false
  102.                     }）
  103.                 }
  104.             }）;
  105.         }
  106.         标志++;
  107.     }，2000）

封装方法：

  1. // -------------------------------------------动画---- ----------------------------------------------- 
  2. //运动动画，调用Tween.js 
  3. // ele：dom | 班级| id | 标签节点| 类名| id名| 标签名，只支持选择一个节点，类类名以及标签名只能选择页面中第一个
  4. // attr：属性属性名
  5. //值：目标值目标值
  6. //时间：持续时间持续时间
  7. //补间：定时function函数方程
  8. // flag：Boolean判断是按值移动还是按位置移动，默认按位置移动
  9. // fn：callback回调函数
  10. //增加返回值：将内部参数对象返回，可以通过设置返回对象的属性stop为true打断动画
  11. 函数 requestAnimation（obj） {
  12.      // -------------------------------------参数设置--------------------------------------------- 
  13.     //默认属性
  14.     const参数= {
  15.          ele：null，
  16.          attr：null，
  17.          value：null，
  18.          time：1000，
  19.          tween：“linear”，
  20.          flag：true，
  21.          stop：false，
  22.          fn：“”
  23.     }
  24.     //合并传入属性
  25.     Object .assign（parameter，obj）; //覆盖重名属性
  26.     // -------------------------------------动画设置--------- ------------------------------------ 
  27.     //创建运动方程初始参数，方便复用
  28.     let start = 0 ; //用于保存初始时间戳
  29.     let target =（typeof parameter.ele === “string”？document .querySelector（parameter.ele）：parameter.ele），//目标节点 
  30.         attr = parameter.attr，//目标属性 
  31.         beginAttr = parseFloat（getComputedStyle（target）[attr]），// attr起始值 
  32.         value = parameter.value，//运动目标值 
  33.         count = value  -  beginAttr，//实际运动值 
  34.         time = parameter.time，//运动持续时间，
  35.         tween = parameter.tween，//运动函数
  36.         flag = parameter.flag，
  37.         callback = parameter.fn，//回调函数 
  38.         curVal = 0 ; //运动当前值
  39.     //判断传入函数是否为数组，多段运动 
  40.     （function（） {
  41.          if（attr instanceof  Array）{
  42.             beginAttr = [];
  43.             count = [];
  44.             对于（让我的 ATTR）{
  45.                  常量 VAL = parseFloat（的getComputedStyle（目标）[I]）;
  46.                 beginAttr.push（VAL）;
  47.                 count.push（value  -  val）;
  48.             }
  49.         }
  50.         if（value instanceof  Array）{
  51.              for（let i in value）{
  52.                 count [i] = value [i]  -  beginAttr [i];
  53.             }
  54.         }
  55.     }）（）;
  56.     //运动函数
  57.     功能 动画（时间戳） {
  58.          如果（parameter.stop）返回 ; //打断
  59.         //存储初始时间戳
  60.         if（！start）start = timestamp;
  61.         //已运动时间
  62.         让 t =时间戳 - 开始;
  63.         //判断多段运动
  64.         if（beginAttr instanceof  Array）{
  65.              // const len = beginAttr.length //存数组长度，复用
  66.             //多段运动第1类 - 多属性，同目标，同时间/不同时间
  67.             if（typeof count === “number”）{ //同目标
  68.                 //同时间
  69.                 if（typeof time === “number”）{
  70.                      if（t> time）t = time; //判断是否超出目标值
  71.                     //循环attr，分别赋值
  72.                     为（let i in beginAttr）{
  73.                          if（flag）curVal = Tween [tween]（t，beginAttr [i]，count，time）; //调用Tween，返回当前属性值，此时计算方法为移动到
  74.                         写入位置else curVal = Tween [tween]（t，beginAttr [i]，count + beginAttr [i]，time）; //调用Tween，返回当前属性值，此时计算方法为移动了
  75.                         写入距离if（attr [i] === “opacity”）target.style [attr [i]] = curVal; //给属性赋值
  76.                         else target.style [attr [i]] = curVal + “px” ; //给属性赋值
  77.                         if（t <time）requestAnimationFrame（animate）; //判断是否运动完
  78.                         其他回调&& callback（）; //调用回调函数
  79.                     }
  80.                     回归 ;
  81.                 }
  82.                 //不同时间
  83.                 if（time instanceof  Array）{
  84.                      //循环时间，attr，分别赋值
  85.                     为（让我在 beginAttr中）{
  86.                          //错误判断
  87.                         if（！time [i] && time [i]！== 0）{
  88.                              throw  new  Error（
  89.                                  “输入时间的长度不等于属性的长度”）;
  90.                         }
  91.                         //判断是否已经完成动画，完成则跳过此次循环
  92.                         if（parseFloat（getComputedStyle（target）[attr [i]]）===（typeof value === “number”？value：value [i]） ）
  93.                              继续 ;
  94.                         // t =时间戳 - 开始; //每次循环初始化t 
  95.                         if（t> time [i]）t = time [i]; //判断是否超出目标值
  96.                         if（flag || attr [i] === “opacity”）curVal = Tween [tween]（t，beginAttr [i]，count，i）; //调用Tween，返回当前属性值，此时计算方法为移动到
  97.                         写入位置else curVal = Tween [tween]（t，beginAttr [i]，count + beginAttr [i]，i）; //调用Tween，返回当前属性值，此时计算方法为移动了
  98.                         写入距离if（attr [i] === “opacity”）target.style [attr [i]] = curVal; //给属性赋值
  99.                         else target.style [attr [i]] = curVal + “px” ; //给属性赋值
  100.                     }
  101.                     if（t < Math .max（... time））requestAnimationFrame（animate）; //判断函数是否运动完
  102.                     其他回调&& callback（）; //如果已经执行完时间最长的动画，则调查回调函数
  103.                     return ;
  104.                 }
  105.             }
  106.             //多段运动第2类 - 多属性，不同目标，同时间/不同时间
  107.             if（count instanceof  Array）{
  108.                  //同时间
  109.                 if（typeof time === “number”）{
  110.                     if（t> time）t = time; //判断是否超出目标值
  111.                     for（let i in beginAttr）{ //循环attr，count，分别赋值
  112.                         //错误判断
  113.                         if（！count [i] && count [i]！== 0）{
  114.                              throw  new  Error（
  115.                                  “输入值的长度不是等于属性的长度“）;
  116.                         }
  117.                         if（flag || attr [i] === “opacity”）curVal = Tween [tween]（t，beginAttr [i]，count [i]，time）; //调用Tween，返回当前属性值，此时计算方法为移动到
  118.                         写入位置else curVal = Tween [tween]（t，beginAttr [i]，count [i] + beginAttr [i]，time）; //调用Tween，返回当前属性值，此时计算方法为移动了
  119.                         写入距离if（attr [i] === “opacity”）target.style [attr [i]] = curVal; //给属性赋值
  120.                         else target.style [attr [i]] = curVal + “px” ; //给属性赋值
  121.                     }
  122.                     if（t <time）requestAnimationFrame（animate）; //判断函数是否运动完
  123.                     其他回调&& callback（）; //如果已经执行完时间最长的动画，则调查回调函数
  124.                     return ;
  125.                 }
  126.                 //不同时间
  127.                 if（time instanceof  Array）{
  128.                      for（let i in beginAttr）{
  129.                          //错误判断
  130.                         if（！time [i] && time [i]！== 0）{
  131.                              throw  new  Error（
  132.                                  “输入时间的长度）不等于属性的长度“）;
  133.                         }
  134.                         //判断是否已经完成动画，完成则跳过此次循环
  135.                         if（parseFloat（getComputedStyle（target）[attr [i]]）===（typeof value === “number”？value：value [i]） ）
  136.                              继续 ;
  137.                         if（t> time [i]）t = time [i]; //判断是否超出目标值
  138.                         //错误判断
  139.                         if（！count [i] && count [i]！== 0）{
  140.                              throw  new  Error（
  141.                                  “输入值的长度不等于属性的长度”）;
  142.                         }
  143.                         if（flag || attr [i] === “opacity”）curVal = Tween [tween]（t，beginAttr [i]，count [i]，time [i]）; //调用Tween，返回当前属性值，此时计算方法为移动到
  144.                         写入位置其他 curVal = Tween [tween]（t，beginAttr [i]，count [i] + beginAttr [i]，time [i]） ; //调用Tween，返回当前属性值，此时计算方法为移动了
  145.                         写入距离if（attr [i] === “opacity”）target.style [attr [i]] = curVal;
  146.                         否则 target.style [attr [i]] = curVal + “px” ;
  147.                     }
  148.                     if（t < Math .max（... time））requestAnimationFrame（animate）;
  149.                     else callback && callback（）;
  150.                     回归 ;
  151.                 }
  152.             }
  153.         }
  154.         //单运动模式
  155.         if（t> time）t = time;
  156.         if（flag || attr === “opacity”）curVal = Tween [tween]（t，beginAttr，count，time）; //调用Tween，返回当前属性值，此时计算方法为移动到
  157.         写入位置else curVal = Tween [tween]（t，beginAttr [i]，count + beginAttr，time）; //调用Tween，返回当前属性值，此时计算方法为移动了
  158.         写入距离if（attr === “opacity”）target.style [attr] = curVal;
  159.         否则 target.style [attr] = curVal + “px” ;
  160.         if（t <time）requestAnimationFrame（animate）;
  161.         else callback && callback（）;
  162.     }
  163.     requestAnimationFrame（动画）;
  164.     返回参数; //返回对象，供打断或其他用途
  165. }
  166. //Tween.js 
  167. / *
  168.  * t：时间已过时间
  169.  * b：开始起始值
  170.  * c：计算总的运动值
  171.  * d：持续时间持续时间
  172.  *
  173.  *曲线方程
  174.  *
  175.  * http://www.cnblogs.com/bluedream2009/archive/2010/06/19/1760909.html
  176.  * * /
  177. 让 Tween = {
  178.      linear：function（t，b，c，d） { //匀速
  179.         返回 c * t / d + b;
  180.     }，
  181.     easeIn：function（t，b，c，d） { //加速曲线
  182.         return c *（t / = d）* t + b;
  183.     }，
  184.     easeOut：function（t，b，c，d） { //减速曲线
  185.         return -c *（t / = d）*（t  - 2）+ b;
  186.     }，
  187.     easeBoth：function（t，b，c，d） { //加速减速曲线
  188.         if（（t / = d / 2）< 1）{
  189.              return c / 2 * t * t + b;
  190.         }
  191.         return -c / 2 *（（ -  t）*（t  - 2） - 1）+ b;
  192.     }，
  193.     easeInStrong：function（t，b，c，d） { //加加速曲线
  194.         return c *（t / = d）* t * t * t + b;
  195.     }，
  196.     easeOutStrong：function（t，b，c，d） { //减减曲线
  197.         返回 -c *（（t = t / d  - 1）* t * t * t  - 1）+ b;
  198.     }，
  199.     easeBothStrong：function（t，b，c，d） { //加速减减速线
  200.         如果（（t / = d / 2）< 1）{
  201.              return c / 2 * t * t * t * t + b;
  202.         }
  203.         return -c / 2 *（（t  -  = 2）* t * t * t  - 2）+ b;
  204.     }，
  205.     elasticIn：function（t，b，c，d，a，p） { //正弦衰减曲线（弹动渐入）
  206.         if（t === 0）{
  207.              return b;
  208.         }
  209.         if（（t / = d）== 1）{
  210.              return b + c;
  211.         }
  212.         if（！p）{
  213.             p = d * 0.3 ;
  214.         }
  215.         if（！a || a < Math .abs（c））{
  216.             a = c;
  217.             var s = p / 4 ;
  218.         } else {
  219.              var s = p /（2 * Math .PI）* Math .asin（c / a）;
  220.         }
  221.         返回 - （A * 数学 .pow（2，10 *（T - = 1））* 数学 .sin（（T * d - S）*（2 * 数学 .PI）/ P））+ B;
  222.     }，
  223.     elasticOut：function（t，b，c，d，a，p） { //正弦增强曲线（弹动渐出）
  224.         if（t === 0）{
  225.              return b;
  226.         }
  227.         if（（t / = d）== 1）{
  228.              return b + c;
  229.         }
  230.         if（！p）{
  231.             p = d * 0.3 ;
  232.         }
  233.         if（！a || a < Math .abs（c））{
  234.             a = c;
  235.             var s = p / 4 ;
  236.         } else {
  237.              var s = p /（2 * Math .PI）* Math .asin（c / a）;
  238.         }
  239.         返回 a * Math .pow（2，-10 * t）* Math .sin（（t * d  -  s）*（2 * Math .PI）/ p）+ c + b;
  240.     }，
  241.     elasticBoth：function（t，b，c，d，a，p） {
  242.          if（t === 0）{
  243.              return b;
  244.         }
  245.         if（（t / = d / 2）== 2）{
  246.              return b + c;
  247.         }
  248.         if（！p）{
  249.             p = d *（0.3 * 1.5）;
  250.         }
  251.         if（！a || a < Math .abs（c））{
  252.             a = c;
  253.             var s = p / 4 ;
  254.         } else {
  255.              var s = p /（2 * Math .PI）* Math .asin（c / a）;
  256.         }
  257.         如果（T < 1）{
  258.              返回 -0.5 *（A * 数学 .pow（2，10 *（T - = 1））*
  259.                  数学 .sin（（T * d - S）*（2 * 数学 .PI）/ p））+ b;
  260.         }
  261.         返回 a * Math .pow（2，-10 *（t  -  = 1））*
  262.              Math .sin（（t * d  -  s）*（2 * Math .PI）/ p）* 0.5 + c + b;
  263.     }，
  264.     backIn：function（t，b，c，d，s） { //回退加速（回退渐入）
  265.         if（typeof s == 'undefined'）{
  266.             s = 1.70158 ;
  267.         }
  268.         return c *（t / = d）* t *（（s + 1）* t  -  s）+ b;
  269.     }，
  270.     backOut：function（t，b，c，d，s） {
  271.          if（typeof s == 'undefined'）{
  272.             s = 3.70158 ; //回缩的距离
  273.         }
  274.         return c *（（t = t / d  - 1）* t *（（s + 1）* t + s）+ 1）+ b;
  275.     }，
  276.     backBoth：function（t，b，c，d，s） {
  277.          if（typeof s == 'undefined'）{
  278.             s = 1.70158 ;
  279.         }
  280.         if（（t / = d / 2）< 1）{
  281.              return c / 2 *（t * t *（（（s * =（1.525））+ 1）* t  -  s））+ b;
  282.         }
  283.         return c / 2 *（（t  -  = 2）* t *（（（s * =（1.525））+ 1）* t + s）+ 2）+ b;
  284.     }，
  285.     bounceIn：function（t，b，c，d） { //弹球渐出）
  286.         返回 c  -  Tween [ 'bounceOut' ]（d  -  t，0，c，d）+ b;
  287.     }，
  288.     bounceOut：function（t，b，c，d） {
  289.          if（（t / = d）<（1 / 2.75））{
  290.              return c *（7.5625 * t * t）+ b;
  291.         } else  if（t <（2 / 2.75））{
  292.              return c *（7.5625 *（t  -  =（1.5 / 2.75））* t + 0.75）+ b;
  293.         } else  if（t <（2.5 / 2.75））{
  294.              return c *（7.5625 *（t  -  =（2.25 / 2.75））* t + 0.9375）+ b;
  295.         }
  296.         return c *（7.5625 *（t  -  =（2.625 / 2.75））* t + 0.984375）+ b;
  297.     }，
  298.     bounceBoth：函数（T，B，C，d） {
  299.          如果（T <d / 2）{
  300.              返回吐温[ 'bounceIn' ]（T * 2，0，C，d）* 0.5 + B;
  301.         }
  302.         return Tween [ 'bounceOut' ]（t * 2 -  d，0，c，d）* 0.5 + c * 0.5 + b;
  303.     }
  304. }
  305. // ------------------------------------------- DOM操作--- ------------------------------------------------ 
  306. //添加节点
  307. // ele：父节点，支持输入变量，id值，类值，标签值。除变量外，其余值必须为字符串
  308. //节点：添加的标签名，值为字符串
  309. // n：节点添加个数
  310. // className：节点绑定的类名，值为字符串，多个类名用空格隔开
  311. //布尔：是否选中所有目标父节点。可选参数，不输入则判定为false，则只匹配选中的第一个节点
  312. 函数 addChild（ele，node，n，className，boolean） {
  313.      //获取节点
  314.     let parent = null ;
  315.     if（typeof ele！== “string”）parent = ele;
  316.     else  if（ele [ 0 ] === “＃”）parent = document .getElementById（ele.slice（1））;
  317.     else  if（ele [ 0 ] === “。”）{
  318.          if（boolean === false）parent = document .getElementsByClassName（ele.slice（1））[ 0 ];
  319.         else parent = document .getElementsByClassName（ele.slice（1））;
  320.     } else {
  321.          if（boolean === false）parent = docuemnt.getElementsByTagName（ele）[ 0 ];
  322.         else parent = document .getElementsByTagNameNS（ele）;
  323.     }
  324.     //声明用于存储父节点及子节点的对象
  325.     const obj = {
  326.          “parent”：parent，
  327.          “children”：[]
  328.     };
  329.     //添加节点
  330.     if（boolean）{
  331.          for（let i = 0 ; i <parent.length; i ++）{
  332.              //创建容器碎片
  333.             const fragment = document .createDocumentFragment（）;
  334.             //保存子节点，用于返回值
  335.             obj.children [i] = [];
  336.             for（let j = 0 ; j <n; j ++）{
  337.                  const target = document .createElement（node）;
  338.                 target.className = className;
  339.                 fragment.appendChild（目标）;
  340.                 //添加子节点到数组，用于返回值
  341.                 obj.children [i] [j] =目标;
  342.             }
  343.             父[I] .appendChild（片段）
  344.         }
  345.     } else {
  346.          //创建碎片容器
  347.         const fragment = document .createDocumentFragment（）;
  348.         for（let i = 0 ; i <n; i ++）{
  349.              const target = document .createElement（node）;
  350.             target.className = className;
  351.             fragment.appendChild（目标）;
  352.             //添加子节点，用于返回值
  353.             obj.children [i] =目标;
  354.         }
  355.         //将碎片容器一次性添加到父节点
  356.         parent.appendChild（片段）;
  357.     }
  358.     //返回参数，供动画函数调用
  359.     return obj;
  360. }

案例解析

HTML

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

CSS

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

首先说一下流星的样式：

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

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

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

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

JS部分以流星举例说明

  1. setInterval（function（） {
  2.      const obj = addChild（“#sky”，“p”，2，“star”）; //插入流星
  3.     for（let i = 0 ; i <obj.children.length; i ++）{
  4.          //随机位置
  5.         const top = -50 + Math .random（）* 200 + “px”，
  6.             left = 200 + Math .random（）* 1200 + “px”，
  7.             scale = 0.3 + Math .random（）* 0.5 ;
  8.         const timer = 1000 + Math .random（）* 1000 ;
  9.         obj.children [i] .style.top = top;
  10.         obj.children [i] .style.left = left;
  11.         obj.children [i] .style.transform = `scale（$ {scale}）` ;
  12.         
  13.         //添加动画
  14.         requestAnimation（{
  15.             ele：obj.children [i]，
  16.              attr：[ “top”，“left”，“opacity” ]，
  17.              值：[ 150，-150，.8 ]，
  18.              time：timer，
  19.              flag：false，
  20.              fn：function（） {
  21.                 requestAnimation（{
  22.                     ELE：obj.children [I]，
  23.                      ATTR：“顶”，“左”，“不透明” ]，
  24.                      值：[ 150，-150，0 ]，
  25.                      时间：定时器，
  26.                      标志：假，
  27.                      FN：（） => {
  28.                         obj.parent.removeChild（obj.children [I]）; //动画结束删除节点
  29.                     }
  30.                 }）
  31.             }
  32.         }）;
  33.     }
  34. }，1000）;

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

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

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

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

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

小问题

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

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

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

结语

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

以上就是CSS+JS如何实现浪漫流星雨动画效果？（代码示例）的详细内容，更多请关注Gxl网其它相关文章！

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！