粒子效果

下载代码

html

css

分享到微信朋友圈

html

css

html,
body {
  margin: 0px;
}

.gradient {
  background-color: #9d30a3;
  /* IE9, iOS 3.2+ */
  
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxyYWRpYWxHcmFkaWVudCBpZD0idnNnZyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIGN4PSI1MCUiIGN5PSI1MCUiIHI9IjcwLjcxMDY3ODExODY1NDc2JSI+PHN0b3Agc3RvcC1jb2xvcj0iI2U3NzhjZSIgc3RvcC1vcGFjaXR5PSIxIiBvZmZzZXQ9IjAiLz48c3RvcCBzdG9wLWNvbG9yPSIjZGQ0MGJhIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMC4yNSIvPjxzdG9wIHN0b3AtY29sb3I9IiNkNDNkYjciIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIxIi8+PC9yYWRpYWxHcmFkaWVudD48cmVjdCB4PSItNTAiIHk9Ii01MCIgd2lkdGg9IjEwMSIgaGVpZ2h0PSIxMDEiIGZpbGw9InVybCgjdnNnZykiIC8+PC9zdmc+);
  -webkit-gradient(radial, center center, 0, center center, 422, color-stop(0, rgb(231, 120, 206)), color-stop(0.25, rgb(221, 64, 186)), color-stop(1, rgb(212, 61, 183)));
  /* Android 2.3 */
  
  background-image: -webkit-radial-gradient(center center, circle farthest-corner, rgb(231, 120, 206) 0%, rgb(221, 64, 186) 25%, rgb(50, 3, 118) 104%);
  /* IE10+ */
  
  background-image: radial-gradient(circle farthest-corner at center center, rgb(231, 120, 206) 0%, rgb(221, 64, 186) 25%, rgb(50, 3, 118) 104%);
  background-image: -ms-radial-gradient(center center, circle farthest-corner, rgb(231, 120, 206) 0%, rgb(221, 64, 186) 25%, rgb(50, 3, 118) 104%);
}

canvas {
  display: block;
}

.title {
  color: #FFF;
  position: absolute;
  top: 8px;
  left: 12px;
  font-family: verdana;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: bold;
}

JavaScript

var canvas = document.getElementById("canvas"),
  context = canvas.getContext("2d"),
  width = canvas.width = window.innerWidth,
  height = canvas.height = window.innerHeight,
  particles = [],
  num = 50,
  gravityDistance = 100,
  mousePos = {
    x: 0,
    y: 0
  };

function getMousePos(evt) {
  var rect = canvas.getBoundingClientRect();

return {
    x: evt.clientX - rect.left,
    y: evt.clientY - rect.top
  };
}

canvas.addEventListener('mousemove', function(evt) {
  mousePos = getMousePos(evt);
}, false);

/**
 * Particle
 */
var Particle, p;

Particle = function() {
  this.initialize();
};

p = Particle.prototype;

p.initialize = function() {
  this.angleX = Math.random() * Math.PI * 2;
  this.angleY = Math.random() * Math.PI * 2;
  this.speedX = Math.random();
  this.speedY = Math.random();
  this.radius = 120 + Math.random() * 120;

return this;
};

p.update = function() {
  var x = Math.cos(this.angleX) * this.radius,
    y = Math.sin(this.angleY) * this.radius,
    currentSpeedX = this.speedX * con.speed,
    currentSpeedY = this.speedY * con.speed;

if (Math.abs(mousePos.x - width / 2 - x) < gravityDistance && Math.abs(mousePos.y - height / 2 - y) < gravityDistance) {
    currentSpeedX = currentSpeedX * (Math.abs(mousePos.x - width / 2 - x) / gravityDistance) * 0.5;
    currentSpeedY = currentSpeedY * (Math.abs(mousePos.y - height / 2 - y) / gravityDistance) * 0.5;
  }

this.angleX += currentSpeedX;
  this.angleY += currentSpeedY;

context.beginPath();
  context.fillStyle = "white";

context.arc(width / 2 + x, height / 2 + y, 2.5, 0, Math.PI * 2, false);
  context.fill();
};

// control bar
var ControlBar = function() {
  this.speed = 0.035;
};

var con = new ControlBar();
var gui = new dat.GUI();
var conSpeed = gui.add(con, 'speed', 0.02, 0.08).step(0.005);

for (var i = 0; i < num; i += 1) {
  particles.push(new Particle());
}

function draw() {
  context.clearRect(0, 0, width, height);

for (var i = 0; i < num; i += 1) {
    particles[i].update();
  }

requestAnimationFrame(draw);
}

draw();

window.addEventListener('resize', function() {
  width = canvas.width = window.innerWidth;
  height = canvas.height = window.innerHeight;
});

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