SOURCE

console 命令行工具 X clear

                    
>
console
function Particle(x, y) {
  this.x = x;
  this.y = y;
  this.radius = 5;
  this.color = 'blue)';
  this.alpha = 1;
  this.angle = Math.random() * Math.PI * 2;
  this.speed = 1.2;
  this.vx = 0;
  this.vy = 0;
}

Particle.prototype.draw = function (ctx) {
  ctx.save();
  ctx.translate(this.x, this.y);
  ctx.globalAlpha = this.alpha;
  ctx.strokeStyle = 'rgba(255, 255, 255, .4)';
  ctx.fillStyle = this.color;
  ctx.beginPath();
  ctx.arc(0, 0, this.radius, 0, Math.PI * 2, true);
  ctx.closePath();
  ctx.fill();
  ctx.stroke();
  ctx.restore(); 
};

var canvas = document.querySelector('canvas'),
    ctx = canvas.getContext('2d'),
    W = canvas.width = window.innerWidth,
    H = canvas.height = window.innerHeight,
    particles = [],
    mainParticle = new Particle(W / 2 - 300, H / 2 -100),
    targetX = W / 2,
    targetY = H / 2;


mainParticle.vx = 7;
mainParticle.vy = 7;
mainParticle.color = 'rgba(0, 0, 0, 0)';

function drawParticle(particle) {
  particle.draw(ctx);
  setTimeout(function() {
    particle.vx = Math.sin(particle.angle) * particle.speed;
    particle.vy = Math.cos(particle.angle) * particle.speed;
    particle.x += particle.vx;
    particle.y += particle.vy;
    if (particle.radius > .02) {
      particle.radius -= .02;
    } 
    if (particle.alpha > .01) {
      particle.alpha -= .01;
    } 
  }, 700);
}

function animateMainParticle() {
  var particle = new Particle(mainParticle.x, mainParticle.y);
  particle.color = 'rgba(52, 152,' +  (150 + Math.round(Math.random() * 105 )) + ', 1)';
  particle.radius = 4;
  particle.alpha = 1;
  particles.push(particle);

  var dx = targetX - mainParticle.x,
      dy = targetY - mainParticle.y;
  mainParticle.speed = .01;
  mainParticle.vx += dx * mainParticle.speed;
  mainParticle.vy += dy * mainParticle.speed;
  mainParticle.x += mainParticle.vx;
  mainParticle.y += mainParticle.vy;

  mainParticle.draw(ctx);
}

(function drawFrame(){
  window.requestAnimationFrame(drawFrame, canvas);
  ctx.fillStyle = 'rgba(23, 41, 58, .55)';
  ctx.fillRect(0, 0, W, H);
  particles.forEach(drawParticle);
  animateMainParticle();
}());
<canvas></canvas>
* {margin: 0; padding: 0;}
canvas { display: block;}