参考网址：https://codepen.io/natewiley/pen/GJVOVw?depth=everything&order=popularity&page=2&q=Particle+Animation&show_forks=false
使用了 TweenMax 动画库

源码

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>Document</title>
  7.     <style>
  8.         html, body { height: 100%; } body { background: black; overflow: hidden; } .wrap { height: 100%;perspective: 200px; transform-style: preserve-3d; } .c { position: absolute; }
  9.         </style>
  10. </head>
  12. <body>
  13.     <div class="wrap">
  14.     </div>
  15.     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
  16.     <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenMax.min.js"></script>
  17.     <script>
  18.     //源码链接 https://codepen.io/anon/pen/goBRxj?depth=everything&order=popularity&page=2&q=Particle+Animation&show_forks=false
  19.     //js https://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenMax.min.js
  20.     var $wrap = $(".wrap"),
  21.         w = $wrap.width(),
  22.         h = $wrap.height();
  23.         //添加 div 
  24.     for (var i = 0;i < 30;i++) {
  25.         $("<div class=\"c\"></div>").appendTo($wrap);
  26.         // console.log($(".wrap").find('div').length);
  27.     }
  28.     // console.log($(".wrap"));
  29.     function random(min, max) {
  30.         return (Math.random() * (max - min)) + min;
  31.     }
  33.     $wrap.find(".c").each(function(i) {
  35.         var x = random(0, w),
  36.             y = random(0, h),
  37.             z = random(-1000, -200),
  38.             color = "#fff";
  39.         size = random(1, 6),
  40.             c = $(this);
  42.         c.css({
  43.             background: color,
  44.             height: size,
  45.             width: size,
  46.             borderRadius: "50%",
  47.             boxShadow: "0 0 " + size + "px " + color
  48.         })
  49.     //dom 速度 {初始时的样式} {结束时的样式}
  50.         TweenMax.fromTo(c, 10, {
  51.             opacity: 0,
  52.             x: x,
  53.             y: y,
  54.             z: z
  55.         }, {
  56.             opacity: 1,
  57.             z: 200,
  58.             repeat: -1,//是否重复执行
  59.             // delay: i * -.015
  60.             delay: i * -.3//延迟时间
  61.         });
  63.     });
  65.     // function touches(e){
  66.     //     var x = e.touches ? e.touches[0].clientX : e.clientX, 
  67.     //             y = e.touches ? e.touches[0].clientY : e.clientY;
  69.     //     TweenMax.to($wrap, 1, {
  70.     //         webkitPerspectiveOrigin: x + "px " + y +"px",
  71.     //         perspectiveOrigin: x + "px " + y +"px"
  72.     //     });
  74.     // }
  76.     // window.addEventListener("mousemove", touches);
  77.     // window.addEventListener("touchstart", touches);
  78.     // window.addEventListener("touchmove", touches);
  79.     </script>
  80. </body>
  82. </html>

效果图

15.gif

具体的在公司页面上的实现

  1. PC 端

公司实现页面 PC 端 => 顶部 banner 效果

  • 源码 ``` banTopAnimate(); //顶部 ban 粒子效果 function banTopAnimate() {

    1.   var $con = $("#ban__animate"),
    2.   w = $con.width(),
    3.   h = $con.height();
    4.   //添加 div 
    5.   for (var i = 0; i < 50; i++) {
    6.       $("<div class=\"animate__list\"></div>").appendTo($con);
    7.       // console.log($(".wrap").find('div').length);
    8.   }
    9.   // console.log($(".wrap"));
    10.   function random(min, max) {
    11.       return (Math.random() * (max - min)) + min;
    12.   }
    14.   $con.find(".animate__list").each(function (i) {
    16.       var x = random(0, w),
    17.           y = random(0, h),
    18.           z = random(-1000, -200),
    19.           color = "#fff";
    20.       size = random(1, 10),
    21.           c = $(this);
    23.       c.css({
    24.           background: color,
    25.           height: size,
    26.           width: size,
    27.           borderRadius: "50%",
    28.           boxShadow: "0 0 " + size + "px " + color
    29.       })
    30.       //dom 速度 {初始时的样式} {结束时的样式}
    31.       TweenMax.fromTo(c, 10, {
    32.           opacity: 0,
    33.           x: x,
    34.           y: y,
    35.           z: z
    36.       }, {
    37.           opacity: 1,
    38.           z: 200,
    39.           repeat: -1,//是否重复执行
    40.           // delay: i * -.015
    41.           delay: i * -.3//延迟时间
    42.       });
    43.   });

    }

  2. - 效果图
  4. > ![26.gif](http://upload-images.jianshu.io/upload_images/9064013-9fdc90329bf1d520.gif?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
  7. 2. 手机端
  9. > [公司实现页面 手机端](https://m.hizyd.com/Reports/Report2017Total) => 顶部 banner 效果
  12. - 源码

//顶部 .main1 动画 this.mainTopAnimate = function () { var _me = this; var $con = $(“#bananimate”), w = $con.width(), h = $con.height(); //添加 div for (var i = 0; i < 50; i++) { $(“<div class=\”animatelist\”>“).appendTo($con); // console.log($(“.wrap”).find(‘div’).length); } // console.log($(“.wrap”)); function random(min, max) { return (Math.random() * (max - min)) + min; }

  1.     $con.find(".animate__list").each(function (i) {
  3.         var x = random(0, w),
  4.             y = random(0, h),
  5.             z = random(-1000, -200),
  6.             color = "#fff";
  7.         size = random(1, 4),
  8.             c = $(this);
  10.         c.css({
  11.             background: color,
  12.             height: size,
  13.             width: size,
  14.             borderRadius: "50%",
  15.             boxShadow: "0 0 " + size + "px " + color
  16.         })
  17.         //dom 速度 {初始时的样式} {结束时的样式}
  18.         TweenMax.fromTo(c, 10, {
  19.             opacity: 0,
  20.             x: x,
  21.             y: y,
  22.             z: z
  23.         }, {
  24.             opacity: 1,
  25.             z: 200,
  26.             repeat: -1,//是否重复执行
  27.             // delay: i * -.015
  28.             delay: i * -.3//延迟时间
  29.         });
  30.     });
  32.     return _me;
  33. };

```

  • 效果图

22.gif