鼠标跟随

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

window.onload = function(){
  
  var canvas = document.getElementById("canvas"),
      ctx = canvas.getContext("2d");
  
  var w = canvas.width = window.innerWidth * 2;
  var h = canvas.height = window.innerHeight * 2;

var numParticles = 50,
      particles = [],
      radius = 12,
      speed = 0.1;

function randomize(min, max) {
    return Math.round(Math.random() * (max - min) + min);
  };

var pos = {
    x: w/2,
    y: h/2
  };

var colors = ["#e67e22", "#e74c3c", "blue"];

// clone object pos
  var accel = JSON.parse(JSON.stringify(pos));

document.body.addEventListener("mousemove", function(e){
    pos.x = e.clientX;
    pos.y = e.clientY;
  });

for(var i = 0; i < numParticles; i++){
    particles.push(new generate());
  };

function generate(){
    this.x = pos.x;
    this.y = pos.y;
    this.radius = randomize(3,6);
    this.color = colors[Math.floor(Math.random() * colors.length)];
    this.vx = randomize(-2, 2);
    this.vy = randomize(5, 10);
    this.life = randomize(20, 30);
  };

render();

function render(){
    ctx.clearRect(0, 0, w, h);

accel.x += (pos.x - accel.x) * 0.15;
    accel.y += (pos.y - accel.y) * 0.15;

ctx.beginPath();
    ctx.fillStyle = "#f1c40f";
    ctx.arc(accel.x, accel.y, radius, 0, Math.PI * 2, false);
    ctx.fill();
    ctx.globalCompositeOperation = "xor";

for(var j = 0; j < particles.length; j++){
      var p = particles[j];

ctx.beginPath();
      ctx.fillStyle = p.color;
      ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2, false);
      ctx.fill();

p.x += p.vx;
      p.y -= p.vy;

p.radius -= 0.075;
      p.life--;

if(p.life < 0 || p.radius < 0){
        particles[j] = new generate();
      }

}

requestAnimationFrame(render);
  }

// credit
  balapaCop("Elastic Fire", "rgba(255,255,255,.5)");
  
}

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg