edit

src/app/layout/passport/a.scss

@@ -0,0 +1,126 @@
+body {
+    background     : radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
+    height         : 100vh;
+    overflow       : hidden;
+    display        : flex;
+    font-family    : 'Anton', sans-serif;
+    justify-content: center;
+    align-items    : center;
+}
+
+$shooting-time: 3000ms;
+
+.night {
+    position    : relative;
+    width       : 100%;
+    height      : 100%;
+    transform   : rotateZ(45deg);
+    // animation: sky 200000ms linear infinite;
+}
+
+.shooting_star {
+    position     : absolute;
+    left         : 50%;
+    top          : 50%;
+    // width: 100px;
+    height       : 2px;
+    background   : linear-gradient(-45deg, rgba(95, 145, 255, 1), rgba(0, 0, 255, 0));
+    border-radius: 999px;
+    filter       : drop-shadow(0 0 6px rgba(105, 155, 255, 1));
+    animation    :
+        tail $shooting-time ease-in-out infinite,
+        shooting $shooting-time ease-in-out infinite;
+
+    &::before {
+        content      : '';
+        position     : absolute;
+        top          : calc(50% - 1px);
+        right        : 0;
+        // width: 30px;
+        height       : 2px;
+        background   : linear-gradient(-45deg, rgba(0, 0, 255, 0), rgba(95, 145, 255, 1), rgba(0, 0, 255, 0));
+        transform    : translateX(50%) rotateZ(45deg);
+        border-radius: 100%;
+        animation    : shining $shooting-time ease-in-out infinite;
+    }
+
+    &::after {
+        // CodePen Error
+        // @extend .shooting_star::before;
+
+        content      : '';
+        position     : absolute;
+        top          : calc(50% - 1px);
+        right        : 0;
+        // width: 30px;
+        height       : 2px;
+        background   : linear-gradient(-45deg, rgba(0, 0, 255, 0), rgba(95, 145, 255, 1), rgba(0, 0, 255, 0));
+        transform    : translateX(50%) rotateZ(45deg);
+        border-radius: 100%;
+        animation    : shining $shooting-time ease-in-out infinite;
+        transform    : translateX(50%) rotateZ(-45deg);
+    }
+
+    @for $i from 1 through 20 {
+        &:nth-child(#{$i}) {
+            $delay         : random(9999) + 0ms;
+            top            : calc(50% - #{random(400) - 200px});
+            left           : calc(50% - #{random(300) + 0px});
+            // animation-delay: $delay;
+            // opacity: random(50) / 100 + 0.5;
+
+            &::before,
+            &::after {
+                // animation-delay: $delay;
+            }
+        }
+    }
+}
+
+@keyframes tail {
+    0% {
+        width: 0;
+    }
+
+    30% {
+        width: 100px;
+    }
+
+    100% {
+        width: 0;
+    }
+}
+
+@keyframes shining {
+    0% {
+        width: 0;
+    }
+
+    50% {
+        width: 30px;
+    }
+
+    100% {
+        width: 0;
+    }
+}
+
+@keyframes shooting {
+    0% {
+        transform: translateX(0);
+    }
+
+    100% {
+        transform: translateX(300px);
+    }
+}
+
+@keyframes sky {
+    0% {
+        transform: rotate(45deg);
+    }
+
+    100% {
+        transform: rotate(45 + 360deg);
+    }
+}

src/app/layout/passport/d.scss

@@ -6,14 +6,14 @@ $shadow: ();
 
 @for $i from 1 through $n {
     $v: random(90) + 9; // left
-    $h: random(250) + 10; // top
+    $h: random(150) + 10; // top
-    $d: random(70)/10 + 9; // 秒數
+    $d: random(70)/10 + 12; // 秒數
 
     .meteor-#{$i} {
         position        : absolute;
         top             : $h + px;
         left            : $v*1%;
-        width           : 300px;
+        width           : 130px;
         height          : 1px;
         transform       : rotate(-45deg);
         background-image: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
@@ -44,13 +44,21 @@ $shadow: ();
         opacity: 0;
     }
 
+    13% {
+        margin-top     : 600px;
+        margin-left    : -900px;
+        opacity        : 0.6;
+        animation-delay: 2000ms;
+    }
+
     15% {
+        opacity: 0;
+    }
+
+
+    100% {
         margin-top : 700px;
         margin-left: -900px;
         opacity    : 0;
     }
-
-    100% {
-        opacity: 0;
-    }
 }

src/app/layout/passport/particle.ts

@@ -2,26 +2,312 @@ export default class Particle {
   ParticleNetworkAnimation: any;
   PNA: any;
 
-  
+  getLimitedRandom = function (min: number, max: number, roundToInteger?: any) {
+    var number = Math.random() * (max - min) + min;
+    if (roundToInteger) {
+      number = Math.round(number);
+    }
+    return number;
+  };
+
+  returnRandomArrayitem = function (array: string | any[]) {
+    return array[Math.floor(Math.random() * array.length)];
+  };
 
   constructor() {
     this.ParticleNetworkAnimation = this.PNA = function () {};
   }
 
   init() {
-    this.PNA.prototype.init = function (element: any) {
+    this.PNA = {
-      this.$el = document.getElementsByClassName(element);
+      init: function (element: any) {
+        this.$el = document.getElementsByClassName(element);
 
-      this.container = element;
+        this.container = element;
-      this.canvas = document.createElement('canvas');
+        this.canvas = document.createElement('canvas');
-      this.sizeCanvas();
+        this.sizeCanvas();
-      this.container.appendChild(this.canvas);
+        this.container.appendChild(this.canvas);
-      this.ctx = this.canvas.getContext('2d');
+        this.ctx = this.canvas.getContext('2d');
-    //   this.particleNetwork = new ParticleNetwork(this);
+        //   this.particleNetwork = new ParticleNetwork(this);
+
+        this.bindUiActions();
+
+        return this;
+      },
+      bindUiActions: function () {
+        (window as any).on('resize', () => {
+          this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+          // this.sizeContainer();
+          this.sizeCanvas();
+          this.particleNetwork.createParticles();
+        });
+      },
+      sizeCanvas: function () {
+        this.canvas.width = this.container.offsetWidth;
+        this.canvas.height = this.container.offsetHeight;
+      }
+    };
+
+    var Particle = (parent: any, x: any, y: any) => {
+      const network = parent;
+      const canvas = parent.canvas;
+      return {
+        ctx: parent.ctx,
+        particleColor: this.returnRandomArrayitem(network.options.particleColors),
+        radius: this.getLimitedRandom(1.5, 2.5),
+        opacity: 0,
+        x: x || Math.random() * canvas.width,
+        y: y || Math.random() * canvas.height,
+        velocity: {
+          x: (Math.random() - 0.5) * parent.options.velocity,
+          y: (Math.random() - 0.5) * parent.options.velocity
+        }
+      };
+    };
+
+    Particle.prototype.update = function () {
+      if (this.opacity < 1) {
+        this.opacity += 0.01;
+      } else {
+        this.opacity = 1;
+      }
+      // Change dir if outside map
+      if (this.x > this.canvas.width + 100 || this.x < -100) {
+        this.velocity.x = -this.velocity.x;
+      }
+      if (this.y > this.canvas.height + 100 || this.y < -100) {
+        this.velocity.y = -this.velocity.y;
+      }
+
+      // Update position
+      this.x += this.velocity.x;
+      this.y += this.velocity.y;
+    };
+
+    Particle.prototype.draw = function () {
+      // Draw particle
+      this.ctx.beginPath();
+      this.ctx.fillStyle = this.particleColor;
+      this.ctx.globalAlpha = this.opacity;
+      this.ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
+      this.ctx.fill();
+    };
+
+    var ParticleNetwork = (parent: { canvas: any; ctx: any }) => {
+      this.init();
+      return {
+        options: {
+          velocity: 1, // the higher the faster
+          density: 15000, // the lower the denser
+          netLineDistance: 200,
+          netLineColor: '#929292',
+          particleColors: ['#aaa'] // ['#6D4E5C', '#aaa', '#FFC458' ]
+        },
+        canvas: parent.canvas,
+        ctx: parent.ctx
+      };
+    };
+
+    ParticleNetwork.prototype.init = function () {
+      // Create particle objects
+      this.createParticles(true);
+
+      // Update canvas
+      this.animationFrame = requestAnimationFrame(this.update.bind(this));
 
       this.bindUiActions();
+    };
 
-      return this;
+    ParticleNetwork.prototype.createParticles = function (isInitial: any) {
+      // Initialise / reset particles
+      var me = this;
+      this.particles = [];
+      var quantity = (this.canvas.width * this.canvas.height) / this.options.density;
+
+      if (isInitial) {
+        var counter = 0;
+        clearInterval(this.createIntervalId);
+        this.createIntervalId = setInterval(() => {
+          if (counter < quantity - 1) {
+            // Create particle object
+            this.particles.push(new Particle(me, me.canvas.width, me.canvas.height));
+          } else {
+            clearInterval(me.createIntervalId);
+          }
+          counter++;
+        }, 50);
+      } else {
+        // Create particle objects
+        for (var i = 0; i < quantity; i++) {
+          this.particles.push(new Particle(this));
+        }
+      }
+    };
+
+    ParticleNetwork.prototype.createInteractionParticle = function () {
+      // Add interaction particle
+      this.interactionParticle = new Particle(this);
+      this.interactionParticle.velocity = {
+        x: 0,
+        y: 0
+      };
+      this.particles.push(this.interactionParticle);
+      return this.interactionParticle;
+    };
+
+    ParticleNetwork.prototype.removeInteractionParticle = function () {
+      // Find it
+      var index = this.particles.indexOf(this.interactionParticle);
+      if (index > -1) {
+        // Remove it
+        this.interactionParticle = undefined;
+        this.particles.splice(index, 1);
+      }
+    };
+
+    ParticleNetwork.prototype.update = function () {
+      if (this.canvas) {
+        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+        this.ctx.globalAlpha = 1;
+
+        // Draw connections
+        for (var i = 0; i < this.particles.length; i++) {
+          for (var j = this.particles.length - 1; j > i; j--) {
+            var distance,
+              p1 = this.particles[i],
+              p2 = this.particles[j];
+
+            // check very simply if the two points are even a candidate for further measurements
+            distance = Math.min(Math.abs(p1.x - p2.x), Math.abs(p1.y - p2.y));
+            if (distance > this.options.netLineDistance) {
+              continue;
+            }
+
+            // the two points seem close enough, now let's measure precisely
+            distance = Math.sqrt(Math.pow(p1.x - p2.x, 2) + Math.pow(p1.y - p2.y, 2));
+            if (distance > this.options.netLineDistance) {
+              continue;
+            }
+
+            this.ctx.beginPath();
+            this.ctx.strokeStyle = this.options.netLineColor;
+            this.ctx.globalAlpha = ((this.options.netLineDistance - distance) / this.options.netLineDistance) * p1.opacity * p2.opacity;
+            this.ctx.lineWidth = 0.7;
+            this.ctx.moveTo(p1.x, p1.y);
+            this.ctx.lineTo(p2.x, p2.y);
+            this.ctx.stroke();
+          }
+        }
+
+        // Draw particles
+        for (var i = 0; i < this.particles.length; i++) {
+          this.particles[i].update();
+          this.particles[i].draw();
+        }
+
+        if (this.options.velocity !== 0) {
+          this.animationFrame = requestAnimationFrame(this.update.bind(this));
+        }
+      } else {
+        cancelAnimationFrame(this.animationFrame);
+      }
+    };
+
+    ParticleNetwork.prototype.bindUiActions = function () {
+      // Mouse / touch event handling
+      this.spawnQuantity = 3;
+      this.mouseIsDown = false;
+      this.touchIsMoving = false;
+
+      this.onMouseMove = (e: { offsetX: any; offsetY: any }) => {
+        if (!this.interactionParticle) {
+          this.createInteractionParticle();
+        }
+        this.interactionParticle.x = e.offsetX;
+        this.interactionParticle.y = e.offsetY;
+      };
+
+      this.onTouchMove = (e: { preventDefault: () => void; changedTouches: { clientX: any[]; clientY: any }[] }) => {
+        e.preventDefault();
+        this.touchIsMoving = true;
+        if (!this.interactionParticle) {
+          this.createInteractionParticle();
+        }
+        this.interactionParticle.x = e.changedTouches[0].clientX;
+        this.interactionParticle.y = e.changedTouches[0].clientY;
+      };
+
+      this.onMouseDown =  () => {
+        this.mouseIsDown = true;
+        var counter = 0;
+        var quantity = this.spawnQuantity;
+        var intervalId = setInterval(
+           () => {
+            if (this.mouseIsDown) {
+              if (counter === 1) {
+                quantity = 1;
+              }
+              for (var i = 0; i < quantity; i++) {
+                if (this.interactionParticle) {
+                  this.particles.push(new Particle(this, this.interactionParticle.x, this.interactionParticle.y));
+                }
+              }
+            } else {
+              clearInterval(intervalId);
+            }
+            counter++;
+          },
+          50
+        );
+      };
+
+      this.onTouchStart =  (e: { preventDefault: () => void; changedTouches: { clientY: any; }[]; }) => {
+        e.preventDefault();
+        setTimeout(
+           () => {
+            if (!this.touchIsMoving) {
+              for (var i = 0; i < this.spawnQuantity; i++) {
+                this.particles.push(new Particle(this, e.changedTouches[0].clientX, e.changedTouches[0].clientY));
+              }
+            }
+          },
+          200
+        );
+      };
+
+      this.onMouseUp =  () => {
+        this.mouseIsDown = false;
+      };
+
+      this.onMouseOut = function () {
+        this.removeInteractionParticle();
+      };
+
+      this.onTouchEnd =  (e: { preventDefault: () => void; }) => {
+        e.preventDefault();
+        this.touchIsMoving = false;
+        this.removeInteractionParticle();
+      };
+
+      // this.canvas.addEventListener('mousemove', this.onMouseMove);
+      // this.canvas.addEventListener('touchmove', this.onTouchMove);
+      // this.canvas.addEventListener('mousedown', this.onMouseDown);
+      // this.canvas.addEventListener('touchstart', this.onTouchStart);
+      // this.canvas.addEventListener('mouseup', this.onMouseUp);
+      // this.canvas.addEventListener('mouseout', this.onMouseOut);
+      // this.canvas.addEventListener('touchend', this.onTouchEnd);
+    };
+
+    ParticleNetwork.prototype.unbindUiActions = function () {
+      if (this.canvas) {
+        // this.canvas.removeEventListener('mousemove', this.onMouseMove);
+        // this.canvas.removeEventListener('touchmove', this.onTouchMove);
+        // this.canvas.removeEventListener('mousedown', this.onMouseDown);
+        // this.canvas.removeEventListener('touchstart', this.onTouchStart);
+        // this.canvas.removeEventListener('mouseup', this.onMouseUp);
+        // this.canvas.removeEventListener('mouseout', this.onMouseOut);
+        // this.canvas.removeEventListener('touchend', this.onTouchEnd);
+      }
     };
   }
 }

src/app/layout/passport/passport.component.html

@@ -9,14 +9,14 @@
   </nz-header> -->
   <nz-content class="content">
     <nz-row>
-      <nz-col nzSm="0" nzMd="0" nzLg="14" nzXl="14" nzXXl="14" >
+      <nz-col nzSm="0" nzMd="0" nzLg="14" nzXl="14" nzXXl="14">
         <div style="width: 100%;height: 100%;display: flex;align-items: center;min-height: 700px;padding: 60px;">
           <div class="earth-box">
             <div class="earth" style="width: 100%;height: 100%;"></div>
           </div>
         </div>
       </nz-col>
-      <nz-col nzXs="24" nzSm="24" nzMd="24" nzLg="9" nzXl="8" nzXXl="7"  style="z-index: 9999; padding-top    : 64px;">
+      <nz-col nzXs="24" nzSm="24" nzMd="24" nzLg="9" nzXl="8" nzXXl="7" style="z-index: 9999; padding-top    : 64px;">
         <router-outlet></router-outlet>
       </nz-col>
     </nz-row>
@@ -40,5 +40,27 @@
     <div class="meteor-18"></div>
     <div class="meteor-19"></div>
     <div class="meteor-20"></div>
+    <!-- <div class="night">
+      <div class="shooting_star"></div>
+      <div class="shooting_star"></div>
+      <div class="shooting_star"></div>
+      <div class="shooting_star"></div>
+      <div class="shooting_star"></div>
+      <div class="shooting_star"></div>
+      <div class="shooting_star"></div>
+      <div class="shooting_star"></div>
+      <div class="shooting_star"></div>
+      <div class="shooting_star"></div>
+      <div class="shooting_star"></div>
+      <div class="shooting_star"></div>
+      <div class="shooting_star"></div>
+      <div class="shooting_star"></div>
+      <div class="shooting_star"></div>
+      <div class="shooting_star"></div>
+      <div class="shooting_star"></div>
+      <div class="shooting_star"></div>
+      <div class="shooting_star"></div>
+      <div class="shooting_star"></div>
+    </div> -->
   </nz-content>
 </nz-layout>