引言

       平常会做一些有意思的小案例练手，通常都会发到codepen上，但是codepen不能写分析。

       所以就在博客上开个案例分享系列，对demo做个剖析。目的以分享为主，然后也希望各路大神能给出改进的想法，在review中提升技术，发现乐趣~

1、效果图

完整效果，请移步 codepen-流星雨案例

纯CSS案例及本篇案例完整源码，请移步The night of the metero

2、源码

  • HTML
  1. <body>
  2.     <div class="container">
  3.         <div id="mask"></div>
  4.         <div id="sky"></div>
  5.         <div id="moon"></div>
  6.         <div id="stars"></div>
  7.         <div class="cloud cloud-1"></div>
  8.         <div class="cloud cloud-2"></div>
  9.         <div class="cloud cloud-3"></div>
  10.     </div>
  11. </body>
  • CSS
  1.   /* ------------reset------------ */
  3.  * {
  4.      margin: 0;
  5.      padding: 0;
  6.  }
  8.  html,
  9.  body {
  10.      width: 100%;
  11.      min-width: 1000px;
  12.      height: 100%;
  13.      min-height: 400px;
  14.      overflow: hidden;
  15.  }
  17.  /*  ------------画布 ------------ */
  18.  .container {
  19.      position: relative;
  20.      height: 100%;
  21.  }
  22.  /* 遮罩层 */
  24.  #mask {
  25.      position: absolute;
  26.      width: 100%;
  27.      height: 100%;
  28.      background: rgba(0, 0, 0, .8);
  29.      z-index: 900;
  30.  }
  31.  /* 天空背景 */
  33.  #sky {
  34.      width: 100%;
  35.      height: 100%;
  36.      background: linear-gradient(rgba(0, 150, 255, 1), rgba(0, 150, 255, .8), rgba(0, 150, 255, .5));
  37.  }
  38.  /* 月亮 */
  40.  #moon {
  41.      position: absolute;
  42.      top: 50px;
  43.      right: 200px;
  44.      width: 120px;
  45.      height: 120px;
  46.      background: rgba(251, 255, 25, 0.938);
  47.      border-radius: 50%;
  48.      box-shadow: 0 0 20px rgba(251, 255, 25, 0.5);
  49.      z-index: 9999;
  50.  }
  51.  /* 闪烁星星 */
  53.  .blink {
  54.      position: absolute;
  55.      background: rgb(255, 255, 255);
  56.      border-radius: 50%;
  57.      box-shadow: 0 0 5px rgb(255, 255, 255);
  58.      opacity: 0;
  59.      z-index: 10000;
  60.  }
  61.  /* 流星 */
  63.  .star {
  64.      position: absolute;
  65.      opacity: 0;
  66.      z-index: 10000;
  67.  }
  69.  .star::after {
  70.      content: "";
  71.      display: block;
  72.      border: solid;
  73.      border-width: 2px 0 2px 80px;
  74.      /*流星随长度逐渐缩小*/
  75.      border-color: transparent transparent transparent rgba(255, 255, 255, 1);
  76.      border-radius: 2px 0 0 2px;
  77.      transform: rotate(-45deg);
  78.      transform-origin: 0 0 0;
  79.      box-shadow: 0 0 20px rgba(255, 255, 255, .3);
  80.  }
  81.  /* 云 */
  83.  .cloud {
  84.      position: absolute;
  85.      width: 100%;
  86.      height: 100px;
  87.  }
  89.  .cloud-1 {
  90.      bottom: -100px;
  91.      z-index: 1000;
  92.      opacity: 1;
  93.      transform: scale(1.5);
  94.      -webkit-transform: scale(1.5);
  95.      -moz-transform: scale(1.5);
  96.      -ms-transform: scale(1.5);
  97.      -o-transform: scale(1.5);
  98.  }
  100.  .cloud-2 {
  101.      left: -100px;
  102.      bottom: -50px;
  103.      z-index: 999;
  104.      opacity: .5;
  105.      transform: rotate(7deg);
  106.      -webkit-transform: rotate(7deg);
  107.      -moz-transform: rotate(7deg);
  108.      -ms-transform: rotate(7deg);
  109.      -o-transform: rotate(7deg);
  110.  }
  112.  .cloud-3 {
  113.      left: 120px;
  114.      bottom: -50px;
  115.      z-index: 999;
  116.      opacity: .1;
  117.      transform: rotate(-10deg);
  118.      -webkit-transform: rotate(-10deg);
  119.      -moz-transform: rotate(-10deg);
  120.      -ms-transform: rotate(-10deg);
  121.      -o-transform: rotate(-10deg);
  122.  }
  124.  .circle {
  125.      position: absolute;
  126.      border-radius: 50%;
  127.      background: #fff;
  128.  }
  130.  .circle-1 {
  131.      width: 100px;
  132.      height: 100px;
  133.      top: -50px;
  134.      left: 10px;
  135.  }
  137.  .circle-2 {
  138.      width: 150px;
  139.      height: 150px;
  140.      top: -50px;
  141.      left: 30px;
  142.  }
  144.  .circle-3 {
  145.      width: 300px;
  146.      height: 300px;
  147.      top: -100px;
  148.      left: 80px;
  149.  }
  151.  .circle-4 {
  152.      width: 200px;
  153.      height: 200px;
  154.      top: -60px;
  155.      left: 300px;
  156.  }
  158.  .circle-5 {
  159.      width: 80px;
  160.      height: 80px;
  161.      top: -30px;
  162.      left: 450px;
  163.  }
  165.  .circle-6 {
  166.      width: 200px;
  167.      height: 200px;
  168.      top: -50px;
  169.      left: 500px;
  170.  }
  172.  .circle-7 {
  173.      width: 100px;
  174.      height: 100px;
  175.      top: -10px;
  176.      left: 650px;
  177.  }
  179.  .circle-8 {
  180.      width: 50px;
  181.      height: 50px;
  182.      top: 30px;
  183.      left: 730px;
  184.  }
  186.  .circle-9 {
  187.      width: 100px;
  188.      height: 100px;
  189.      top: 30px;
  190.      left: 750px;
  191.  }
  193.  .circle-10 {
  194.      width: 150px;
  195.      height: 150px;
  196.      top: 10px;
  197.      left: 800px;
  198.  }
  200.  .circle-11 {
  201.      width: 150px;
  202.      height: 150px;
  203.      top: -30px;
  204.      left: 850px;
  205.  }
  207.  .circle-12 {
  208.      width: 250px;
  209.      height: 250px;
  210.      top: -50px;
  211.      left: 900px;
  212.  }
  214.  .circle-13 {
  215.      width: 200px;
  216.      height: 200px;
  217.      top: -40px;
  218.      left: 1000px;
  219.  }
  221.  .circle-14 {
  222.      width: 300px;
  223.      height: 300px;
  224.      top: -70px;
  225.      left: 1100px;
  226.  }
  • JS
  1. //流星动画
  2. setInterval(function() {
  3.     const obj = addChild("#sky", "div", 2, "star");
  5.     for (let i = 0; i < obj.children.length; i++) {
  6.         const top = -50 + Math.random() * 200 + "px",
  7.             left = 200 + Math.random() * 1200 + "px",
  8.             scale = 0.3 + Math.random() * 0.5;
  9.         const timer = 1000 + Math.random() * 1000;
  11.         obj.children[i].style.top = top;
  12.         obj.children[i].style.left = left;
  13.         obj.children[i].style.transform = `scale(${scale})`;
  15.         requestAnimation({
  16.             ele: obj.children[i],
  17.             attr: ["top", "left", "opacity"],
  18.             value: [150, -150, .8],
  19.             time: timer,
  20.             flag: false,
  21.             fn: function() {
  22.                 requestAnimation({
  23.                     ele: obj.children[i],
  24.                     attr: ["top", "left", "opacity"],
  25.                     value: [150, -150, 0],
  26.                     time: timer,
  27.                     flag: false,
  28.                     fn: () => {
  29.                         obj.parent.removeChild(obj.children[i]);
  30.                     }
  31.                 })
  32.             }
  33.         });
  34.     }
  36. }, 1000);
  38. //闪烁星星动画
  39. setInterval(function() {
  40.     const obj = addChild("#stars", "div", 2, "blink");
  42.     for (let i = 0; i < obj.children.length; i++) {
  43.         const top = -50 + Math.random() * 500 + "px",
  44.             left = 200 + Math.random() * 1200 + "px",
  45.             round = 1 + Math.random() * 2 + "px";
  46.         const timer = 1000 + Math.random() * 4000;
  48.         obj.children[i].style.top = top;
  49.         obj.children[i].style.left = left;
  50.         obj.children[i].style.width = round;
  51.         obj.children[i].style.height = round;
  53.         requestAnimation({
  54.             ele: obj.children[i],
  55.             attr: "opacity",
  56.             value: .5,
  57.             time: timer,
  58.             flag: false,
  59.             fn: function() {
  60.                 requestAnimation({
  61.                     ele: obj.children[i],
  62.                     attr: "opacity",
  63.                     value: 0,
  64.                     time: timer,
  65.                     flag: false,
  66.                     fn: function() {
  67.                         obj.parent.removeChild(obj.children[i]);
  68.                     }
  69.                 });
  70.             }
  71.         });
  72.     }
  74. }, 1000);
  76. //月亮移动
  77. requestAnimation({
  78.     ele: "#moon",
  79.     attr: "right",
  80.     value: 1200,
  81.     time: 10000000,
  82. });
  84. // 添加云
  85. const clouds = addChild(".cloud", "div", 14, "circle", true);
  86. for (let i = 0; i < clouds.children.length; i++) {
  87.     for (let j = 0; j < clouds.children[i].length;) {
  88.         clouds.children[i][j].classList.add(`circle-${++j}`);
  89.     }
  90. }
  91. //云动画
  93. let flag = 1;
  94. setInterval(
  95.     function() {
  96.         const clouds = document.querySelectorAll(".cloud");
  97.         const left = Math.random() * 5;
  98.         bottom = Math.random() * 5;
  100.         let timer = 0;
  101.         for (let i = 0; i < clouds.length; i++) {
  102.             requestAnimation({
  103.                 ele: clouds[i],
  104.                 attr: ["left", "bottom"],
  105.                 value: flag % 2 ? [-left, -bottom] : [left, bottom],
  106.                 time: timer += 500,
  107.                 flag: false,
  108.                 fn: function() {
  109.                     requestAnimation({
  110.                         ele: clouds[i],
  111.                         attr: ["left", "bottom"],
  112.                         value: flag % 2 ? [left, bottom] : [-left, -bottom],
  113.                         time: timer,
  114.                         flag: false
  115.                     })
  116.                 }
  117.             });
  118.         }
  120.         flag++;
  121.     }, 2000)
  • 封装方法
  1. //———————————————————————————————————————————动画———————————————————————————————————————————————————
  2. //运动动画，调用Tween.js
  3. //ele: dom | class | id | tag  节点 | 类名 | id名 | 标签名，只支持选择一个节点，class类名以及标签名只能选择页面中第一个
  4. //attr: attribute 属性名
  5. //value: target value 目标值
  6. //time: duration 持续时间
  7. //tween: timing function 函数方程
  8. //flag: Boolean 判断是按值移动还是按位置移动,默认按位置移动
  9. //fn: callback 回调函数
  10. //增加返回值: 将内部参数对象返回，可以通过设置返回对象的属性stop为true打断动画
  11. function requestAnimation(obj) {
  12.     //—————————————————————————————————————参数设置—————————————————————————————————————————————
  13.     //默认属性
  14.     const parameter = {
  15.         ele: null,
  16.         attr: null,
  17.         value: null,
  18.         time: 1000,
  19.         tween: "linear",
  20.         flag: true,
  21.         stop: false,
  22.         fn: ""
  23.     }
  25.     //合并传入属性
  26.     Object.assign(parameter, obj); //覆盖重名属性
  28.     //—————————————————————————————————————动画设置—————————————————————————————————————————————
  29.     //创建运动方程初始参数,方便复用
  30.     let start = 0; //用于保存初始时间戳
  31.     let target = (typeof parameter.ele === "string" ? document.querySelector(parameter.ele) : parameter.ele), //目标节点
  32.         attr = parameter.attr, //目标属性
  33.         beginAttr = parseFloat(getComputedStyle(target)[attr]), //attr起始值
  34.         value = parameter.value, //运动目标值
  35.         count = value - beginAttr, //实际运动值
  36.         time = parameter.time, //运动持续时间,
  37.         tween = parameter.tween, //运动函数
  38.         flag = parameter.flag,
  39.         callback = parameter.fn, //回调函数
  40.         curVal = 0; //运动当前值
  42.     //判断传入函数是否为数组，多段运动
  43.     (function() {
  44.         if (attr instanceof Array) {
  45.             beginAttr = [];
  46.             count = [];
  47.             for (let i of attr) {
  48.                 const val = parseFloat(getComputedStyle(target)[i]);
  49.                 beginAttr.push(val);
  50.                 count.push(value - val);
  51.             }
  52.         }
  53.         if (value instanceof Array) {
  54.             for (let i in value) {
  55.                 count[i] = value[i] - beginAttr[i];
  56.             }
  57.         }
  58.     })();
  60.     //运动函数
  61.     function animate(timestamp) {
  62.         if (parameter.stop) return; //打断
  63.         //存储初始时间戳
  64.         if (!start) start = timestamp;
  65.         //已运动时间
  66.         let t = timestamp - start;
  67.         //判断多段运动
  68.         if (beginAttr instanceof Array) {
  69.             // const len = beginAttr.length //存数组长度，复用
  71.             //多段运动第1类——多属性，同目标，同时间/不同时间
  72.             if (typeof count === "number") { //同目标
  73.                 //同时间
  74.                 if (typeof time === "number") {
  75.                     if (t > time) t = time; //判断是否超出目标值
  77.                     //循环attr，分别赋值
  78.                     for (let i in beginAttr) {
  79.                         if (flag) curVal = Tween[tween](t, beginAttr[i], count, time); //调用Tween，返回当前属性值,此时计算方法为移动到写入位置
  80.                         else curVal = Tween[tween](t, beginAttr[i], count + beginAttr[i], time); //调用Tween，返回当前属性值，此时计算方法为移动了写入距离
  81.                         if (attr[i] === "opacity") target.style[attr[i]] = curVal; //给属性赋值
  82.                         else target.style[attr[i]] = curVal + "px"; //给属性赋值
  84.                         if (t < time) requestAnimationFrame(animate); //判断是否运动完
  85.                         else callback && callback(); //调用回调函数
  86.                     }
  87.                     return;
  88.                 }
  90.                 //不同时间
  91.                 if (time instanceof Array) {
  92.                     //循环time，attr，分别赋值
  93.                     for (let i in beginAttr) {
  94.                         //错误判断
  95.                         if (!time[i] && time[i] !== 0) {
  96.                             throw new Error(
  97.                                 "The input time's length is not equal to attribute's length");
  98.                         }
  100.                         //判断是否已经完成动画，完成则跳过此次循环
  101.                         if (parseFloat(getComputedStyle(target)[attr[i]]) === (typeof value === "number" ? value : value[i]))
  102.                             continue;
  103.                         // t = timestamp - start; //每次循环初始化t
  104.                         if (t > time[i]) t = time[i]; //判断是否超出目标值
  106.                         if (flag || attr[i] === "opacity") curVal = Tween[tween](t, beginAttr[i], count, i); //调用Tween，返回当前属性值,此时计算方法为移动到写入位置
  107.                         else curVal = Tween[tween](t, beginAttr[i], count + beginAttr[i], i); //调用Tween，返回当前属性值，此时计算方法为移动了写入距离
  108.                         if (attr[i] === "opacity") target.style[attr[i]] = curVal; //给属性赋值
  109.                         else target.style[attr[i]] = curVal + "px"; //给属性赋值
  110.                     }
  112.                     if (t < Math.max(...time)) requestAnimationFrame(animate); //判断函数是否运动完
  113.                     else callback && callback(); //如果已经执行完时间最长的动画，则调用回调函数
  114.                     return;
  115.                 }
  116.             }
  118.             //多段运动第2类——多属性，不同目标，同时间/不同时间
  119.             if (count instanceof Array) {
  120.                 //同时间
  121.                 if (typeof time === "number") {
  123.                     if (t > time) t = time; //判断是否超出目标值
  125.                     for (let i in beginAttr) { //循环attr，count，分别赋值
  126.                         //错误判断
  127.                         if (!count[i] && count[i] !== 0) {
  128.                             throw new Error(
  129.                                 "The input value's length is not equal to attribute's length");
  130.                         }
  132.                         if (flag || attr[i] === "opacity") curVal = Tween[tween](t, beginAttr[i], count[i], time); //调用Tween，返回当前属性值,此时计算方法为移动到写入位置
  133.                         else curVal = Tween[tween](t, beginAttr[i], count[i] + beginAttr[i], time); //调用Tween，返回当前属性值，此时计算方法为移动了写入距离
  134.                         if (attr[i] === "opacity") target.style[attr[i]] = curVal; //给属性赋值
  135.                         else target.style[attr[i]] = curVal + "px"; //给属性赋值
  136.                     }
  138.                     if (t < time) requestAnimationFrame(animate); //判断函数是否运动完
  139.                     else callback && callback(); //如果已经执行完时间最长的动画，则调用回调函数
  140.                     return;
  141.                 }
  143.                 //不同时间
  144.                 if (time instanceof Array) {
  145.                     for (let i in beginAttr) {
  146.                         //错误判断
  147.                         if (!time[i] && time[i] !== 0) {
  148.                             throw new Error(
  149.                                 "The input time's length is not equal to attribute's length");
  150.                         }
  152.                         //判断是否已经完成动画，完成则跳过此次循环
  153.                         if (parseFloat(getComputedStyle(target)[attr[i]]) === (typeof value === "number" ? value : value[i]))
  154.                             continue;
  156.                         if (t > time[i]) t = time[i]; //判断是否超出目标值
  158.                         //错误判断
  159.                         if (!count[i] && count[i] !== 0) {
  160.                             throw new Error(
  161.                                 "The input value's length is not equal to attribute's length");
  162.                         }
  164.                         if (flag || attr[i] === "opacity") curVal = Tween[tween](t, beginAttr[i], count[i], time[i]); //调用Tween，返回当前属性值,此时计算方法为移动到写入位置
  165.                         else curVal = Tween[tween](t, beginAttr[i], count[i] + beginAttr[i], time[i]); //调用Tween，返回当前属性值，此时计算方法为移动了写入距离
  166.                         if (attr[i] === "opacity") target.style[attr[i]] = curVal;
  167.                         else target.style[attr[i]] = curVal + "px";
  168.                     }
  170.                     if (t < Math.max(...time)) requestAnimationFrame(animate);
  171.                     else callback && callback();
  172.                     return;
  173.                 }
  174.             }
  176.         }
  178.         //单运动模式
  179.         if (t > time) t = time;
  180.         if (flag || attr === "opacity") curVal = Tween[tween](t, beginAttr, count, time); //调用Tween，返回当前属性值,此时计算方法为移动到写入位置
  181.         else curVal = Tween[tween](t, beginAttr[i], count + beginAttr, time); //调用Tween，返回当前属性值，此时计算方法为移动了写入距离
  182.         if (attr === "opacity") target.style[attr] = curVal;
  183.         else target.style[attr] = curVal + "px";
  185.         if (t < time) requestAnimationFrame(animate);
  186.         else callback && callback();
  188.     }
  190.     requestAnimationFrame(animate);
  191.     return parameter; //返回对象，供打断或其他用途
  192. }
  193. //Tween.js
  194. /*
  195.  * t : time 已过时间
  196.  * b : begin 起始值
  197.  * c : count 总的运动值
  198.  * d : duration 持续时间
  199.  *
  200.  * 曲线方程
  201.  *
  202.  * http://www.cnblogs.com/bluedream2009/archive/2010/06/19/1760909.html
  203.  * */
  205. let Tween = {
  206.     linear: function(t, b, c, d) { //匀速
  207.         return c * t / d + b;
  208.     },
  209.     easeIn: function(t, b, c, d) { //加速曲线
  210.         return c * (t /= d) * t + b;
  211.     },
  212.     easeOut: function(t, b, c, d) { //减速曲线
  213.         return -c * (t /= d) * (t - 2) + b;
  214.     },
  215.     easeBoth: function(t, b, c, d) { //加速减速曲线
  216.         if ((t /= d / 2) < 1) {
  217.             return c / 2 * t * t + b;
  218.         }
  219.         return -c / 2 * ((--t) * (t - 2) - 1) + b;
  220.     },
  221.     easeInStrong: function(t, b, c, d) { //加加速曲线
  222.         return c * (t /= d) * t * t * t + b;
  223.     },
  224.     easeOutStrong: function(t, b, c, d) { //减减速曲线
  225.         return -c * ((t = t / d - 1) * t * t * t - 1) + b;
  226.     },
  227.     easeBothStrong: function(t, b, c, d) { //加加速减减速曲线
  228.         if ((t /= d / 2) < 1) {
  229.             return c / 2 * t * t * t * t + b;
  230.         }
  231.         return -c / 2 * ((t -= 2) * t * t * t - 2) + b;
  232.     },
  233.     elasticIn: function(t, b, c, d, a, p) { //正弦衰减曲线（弹动渐入）
  234.         if (t === 0) {
  235.             return b;
  236.         }
  237.         if ((t /= d) == 1) {
  238.             return b + c;
  239.         }
  240.         if (!p) {
  241.             p = d * 0.3;
  242.         }
  243.         if (!a || a < Math.abs(c)) {
  244.             a = c;
  245.             var s = p / 4;
  246.         } else {
  247.             var s = p / (2 * Math.PI) * Math.asin(c / a);
  248.         }
  249.         return -(a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
  250.     },
  251.     elasticOut: function(t, b, c, d, a, p) { //正弦增强曲线（弹动渐出）
  252.         if (t === 0) {
  253.             return b;
  254.         }
  255.         if ((t /= d) == 1) {
  256.             return b + c;
  257.         }
  258.         if (!p) {
  259.             p = d * 0.3;
  260.         }
  261.         if (!a || a < Math.abs(c)) {
  262.             a = c;
  263.             var s = p / 4;
  264.         } else {
  265.             var s = p / (2 * Math.PI) * Math.asin(c / a);
  266.         }
  267.         return a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b;
  268.     },
  269.     elasticBoth: function(t, b, c, d, a, p) {
  270.         if (t === 0) {
  271.             return b;
  272.         }
  273.         if ((t /= d / 2) == 2) {
  274.             return b + c;
  275.         }
  276.         if (!p) {
  277.             p = d * (0.3 * 1.5);
  278.         }
  279.         if (!a || a < Math.abs(c)) {
  280.             a = c;
  281.             var s = p / 4;
  282.         } else {
  283.             var s = p / (2 * Math.PI) * Math.asin(c / a);
  284.         }
  285.         if (t < 1) {
  286.             return -0.5 * (a * Math.pow(2, 10 * (t -= 1)) *
  287.                 Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
  288.         }
  289.         return a * Math.pow(2, -10 * (t -= 1)) *
  290.             Math.sin((t * d - s) * (2 * Math.PI) / p) * 0.5 + c + b;
  291.     },
  292.     backIn: function(t, b, c, d, s) { //回退加速（回退渐入）
  293.         if (typeof s == 'undefined') {
  294.             s = 1.70158;
  295.         }
  296.         return c * (t /= d) * t * ((s + 1) * t - s) + b;
  297.     },
  298.     backOut: function(t, b, c, d, s) {
  299.         if (typeof s == 'undefined') {
  300.             s = 3.70158; //回缩的距离
  301.         }
  302.         return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;
  303.     },
  304.     backBoth: function(t, b, c, d, s) {
  305.         if (typeof s == 'undefined') {
  306.             s = 1.70158;
  307.         }
  308.         if ((t /= d / 2) < 1) {
  309.             return c / 2 * (t * t * (((s *= (1.525)) + 1) * t - s)) + b;
  310.         }
  311.         return c / 2 * ((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2) + b;
  312.     },
  313.     bounceIn: function(t, b, c, d) { //弹球减振（弹球渐出）
  314.         return c - Tween['bounceOut'](d - t, 0, c, d) + b;
  315.     },
  316.     bounceOut: function(t, b, c, d) {
  317.         if ((t /= d) < (1 / 2.75)) {
  318.             return c * (7.5625 * t * t) + b;
  319.         } else if (t < (2 / 2.75)) {
  320.             return c * (7.5625 * (t -= (1.5 / 2.75)) * t + 0.75) + b;
  321.         } else if (t < (2.5 / 2.75)) {
  322.             return c * (7.5625 * (t -= (2.25 / 2.75)) * t + 0.9375) + b;
  323.         }
  324.         return c * (7.5625 * (t -= (2.625 / 2.75)) * t + 0.984375) + b;
  325.     },
  326.     bounceBoth: function(t, b, c, d) {
  327.         if (t < d / 2) {
  328.             return Tween['bounceIn'](t * 2, 0, c, d) * 0.5 + b;
  329.         }
  330.         return Tween['bounceOut'](t * 2 - d, 0, c, d) * 0.5 + c * 0.5 + b;
  331.     }
  332. }
  334. //———————————————————————————————————————————DOM操作———————————————————————————————————————————————————
  335. // 添加节点
  336. // ele: 父节点，支持输入变量，id值，class值，标签值。除变量外，其余值必须为字符串
  337. // node: 添加的标签名，值为字符串
  338. // n: 节点添加个数
  339. // className: 节点绑定的class名，，值为字符串，多个class名用空格隔开
  340. // boolean: 是否选中所有目标父节点。可选参数，不输入则判定为false，则只匹配选中的第一个节点
  341. function addChild(ele, node, n, className, boolean) {
  342.     //获取节点
  343.     let parent = null;
  345.     if (typeof ele !== "string") parent = ele;
  346.     else if (ele[0] === "#") parent = document.getElementById(ele.slice(1));
  347.     else if (ele[0] === ".") {
  348.         if (boolean === false) parent = document.getElementsByClassName(ele.slice(1))[0];
  349.         else parent = document.getElementsByClassName(ele.slice(1));
  350.     } else {
  351.         if (boolean === false) parent = docuemnt.getElementsByTagName(ele)[0];
  352.         else parent = document.getElementsByTagNameNS(ele);
  353.     }
  355.     //声明用于存储父节点及子节点的对象
  356.     const obj = {
  357.         "parent": parent,
  358.         "children": []
  359.     };
  361.     //添加节点
  362.     if (boolean) {
  363.         for (let i = 0; i < parent.length; i++) {
  364.             //创建容器碎片
  365.             const fragment = document.createDocumentFragment();
  366.             //保存子节点，用于返回值
  367.             obj.children[i] = [];
  369.             for (let j = 0; j < n; j++) {
  370.                 const target = document.createElement(node);
  371.                 target.className = className;
  372.                 fragment.appendChild(target);
  373.                 //添加子节点到数组，用于返回值
  374.                 obj.children[i][j] = target;
  375.             }
  377.             parent[i].appendChild(fragment)
  378.         }
  379.     } else {
  380.         //创建碎片容器
  381.         const fragment = document.createDocumentFragment();
  383.         for (let i = 0; i < n; i++) {
  384.             const target = document.createElement(node);
  385.             target.className = className;
  386.             fragment.appendChild(target);
  387.             //添加子节点，用于返回值
  388.             obj.children[i] = target;
  389.         }
  390.         //将碎片容器一次性添加到父节点
  391.         parent.appendChild(fragment);
  392.     }
  394.     //返回参数，供动画函数调用
  395.     return obj;
  396. }

3、案例解析

  • HTML

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

  • CSS

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

首先说一下流星的样式：

  1. #sky .star {
  2.      position: absolute;
  3.      opacity: 0;
  4.      z-index: 10000;
  5.  }
  7.  .star::after {
  8.      content: "";
  9.      display: block;
  10.      border: solid;
  11.      border-width: 2px 0 2px 80px;
  12.      /*流星随长度逐渐缩小*/
  13.      border-color: transparent transparent transparent rgba(255, 255, 255, 1);
  14.      border-radius: 2px 0 0 2px;
  15.      transform: rotate(-45deg);
  16.      transform-origin: 0 0 0;
  17.      box-shadow: 0 0 20px rgba(255, 255, 255, .3);
  18.  }

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

       然后在star后通过after伪类添加流星，用border特性画：

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

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

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



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

然后是画云：

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

JS部分以流星举例说明

  1. setInterval(function() {
  2.     const obj = addChild("#sky", "div", 2, "star"); //插入流星
  4.     for (let i = 0; i < obj.children.length; i++) {
  5.         //随机位置
  6.         const top = -50 + Math.random() * 200 + "px",
  7.             left = 200 + Math.random() * 1200 + "px",
  8.             scale = 0.3 + Math.random() * 0.5;
  9.         const timer = 1000 + Math.random() * 1000;
  11.         obj.children[i].style.top = top;
  12.         obj.children[i].style.left = left;
  13.         obj.children[i].style.transform = `scale(${scale})`;
  15.         //添加动画
  16.         requestAnimation({
  17.             ele: obj.children[i],
  18.             attr: ["top", "left", "opacity"],
  19.             value: [150, -150, .8],
  20.             time: timer,
  21.             flag: false,
  22.             fn: function() {
  23.                 requestAnimation({
  24.                     ele: obj.children[i],
  25.                     attr: ["top", "left", "opacity"],
  26.                     value: [150, -150, 0],
  27.                     time: timer,
  28.                     flag: false,
  29.                     fn: () => {
  30.                         obj.parent.removeChild(obj.children[i]); //动画结束删除节点
  31.                     }
  32.                 })
  33.             }
  34.         });
  35.     }
  37. }, 1000);

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

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

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

       然后，通过for循环（也可以用for-in，for-of，都行。for-of最简单）给每个新添加到页面中的流星一个随机的位置（top、left）、随机的大小（scale）、随机的动画执行时间（timer）;

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

4、小问题

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

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

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

5、结语

       这个小案例虽然从难度上来看很简单，但是它可拓展性很高——比如表个白啊、寄个相思、耍个浪漫啊等等（手动狗头doge），而且用纯CSS也可以实现（我也写了一版纯CSS的，因为不能随机位置随机大小，所以看起来比较静态一点，就不贴了）。所以对于了解CSS动画与JS动画，是个很不错的练手小案例。

       感谢看完这篇文章的可爱的人儿，希望你能从中获得灵感如果能给你带来帮助，那我是极高兴地如果你把灵感告诉我，那我就can't happniess anymore了~

       最后，再次感谢，如果有优化写法，欢迎指导~

前端案例分享（一）：CSS+JS实现流星雨动画的更多相关文章

  1. CSS+JS实现流星雨动画

    引言 平常会做一些有意思的小案例练手,通常都会发到codepen上,但是codepen不能写分析.        所以就在博客上开个案例分享系列,对demo做个剖析.目的以分享为主,然后也希望各路大神 ...

  2. WEB前端性能优化:HTML,CSS,JS和服务器端优化

    对前端开发工程师来说,前端性能优化的重要性是不言而喻的,最为大家所知的是YSLOW的23条优化规则,在我的理解中,性能优化不纯粹是指用户访问网站的速度,也包括开发的效率,这里我总结下我理解中的WEB前 ...

  3. Mikit前端框架，轻量级CSS&JS前端框架

    Mikit CSS Framework Mikit介绍 Mikit是前端开发人员和前端设计师所喜爱的Web框架.Mikit的创建和设计旨在为前端社区提供最灵活而强大的CSS框架. 与许多其他网络框架不 ...

  4. 前端常用场景总结CSS/JS/插件（实用篇更新中...）

    <div class="box box1"> <span>垂直居中</span> </div> .box1{ display: ta ...

  5. H5案例分享：使用JS判断客户端、浏览器、操作系统类型

    使用JS判断客户端.浏览器.操作系统类型 一.JS判断客户端类型 JS判断客户端是否是iOS或者Android手机移动端 通过判断浏览器的userAgent,用正则来判断手机是否是ios和Androi ...

  6. 【HTML响应式项目】成人教育官网前端页面（HTML+CSS+JS实现三端适应）

    这个页面是在校参赛的小组项目,除首页和所有课程页面以外由组内成员编写,发博客纯属记录. 项目源码已上传至码云仓库:https://gitee.com/ynavc/sss 项目演示地址:http://y ...

  7. 2. web前端开发分享-css,js进阶篇

    一,css进阶篇: 等css哪些事儿看了两三遍之后,需要对看过的知识综合应用,这时候需要大量的实践经验, 简单的想法:把qq首页全屏另存为jpg然后通过ps工具切图结合css转换成html,有无从下手 ...

  8. 1. web前端开发分享-css,js入门篇

    关注前端这么多年,没有大的成就,就入门期间积累了不少技巧与心得,跟大家分享一下,不一定都适合每个人,毕竟人与人的教育背景与成长环境心理活动都有差别,但就别人的心得再结合自己的特点,然后探索适合自己的学 ...

  9. web前端开发分享-css,js入门篇（转）

    转自:http://www.cnblogs.com/jikey/p/3600308.html 关注前端这么多年,没有大的成就,就入门期间积累了不少技巧与心得,跟大家分享一下,不一定都适合每个人,毕竟人 ...

随机推荐

  1. In-band Network Function Telemetry

    文章名称:In-band Network Function Telemetry 发表时间:2018 期刊来源:SIGCOMM I Introduction (介绍) NFV运行在商品服务器上,在网络功 ...

  2. beat冲刺（4/7）

    目录 摘要 团队部分 个人部分 摘要 队名:小白吃 组长博客:hjj 作业博客:beta冲刺(4/7) 团队部分 后敬甲(组长) 过去两天完成了哪些任务 整理博客 ppt模板 接下来的计划 做好机动. ...

  3. java对文件的操作

    1.按字节读取文件内容2.按字符读取文件内容3.按行读取文件内容 4.随机读取文件内容 public class ReadFromFile {     /**      * 以字节为单位读取文件,常用 ...

  4. Maya学习笔记

    软件: Maya 2016 : 参考教材: Maya 2016 中文版标准教程 ; 改变视图颜色 [窗口]|[设置/首项选择]|[颜色设置]|[3D视图]: 观察视图 旋转视图 Alt + 鼠标左键 ...

  5. Excel中用REPT函数制作图表

    本文从以下七个方面,阐述在Excel中用REPT函数制作图表: 一. 图形效果展示 二. REPT语法解释 三. REPT制作条形图 四. REPT制作漏斗图 五. REPT制作蝴蝶图 六. REPT ...

  6. [转帖].net 4.8 将不再支持win7 win8 版本

    ZT:https://blogs.msdn.microsoft.com/dotnet/2018/07/18/announcing-net-framework-4-8-early-access-buil ...

  7. RHEL/Centos下Sendmail服务器搭建

    目的 Linux下配置Sendmail服务器,并通过客户端验证. 环境 Cento6 局域网(可访问互联网) 内容 配置Sendmail服务器,使得客户端能够通过foxmail或者outlook ex ...

  8. hdu6438 Buy and Resell

    多少年不写题了... (我把每一天看作是一个商品,第i天是第i个商品) 一开始看了半天看出来一个性质:买的所有商品中最贵的不会比卖的所有商品中最便宜的贵,然后似乎没有什么用处.... 所以最后还是看题 ...

  9. DAY6-Flask项目

    1.ViewModel:处理原始数据:裁剪修饰合并 2.访问静态资源 默认情况下,访问的路径为app根目录的下的static文件,为什么说app是根目录而不是fisher.py下,因为在实例化对象的时 ...

  10. Web前端开发神器--WebStorm(JavaScript 开发工具) 8.0.3 中文汉化破解版

    WebStorm(JavaScript 开发工具) 8.0.3 中文汉化破解版 http://www.jb51.net/softs/171905.html WebStorm 是jetbrains公司旗 ...