canvas抽象艺术的背景粒子动画

下载代码

html

css

分享到微信朋友圈

html

css

@import url("https://fonts.googleapis.com/css?family=Montserrat:200,300,400,600");
.more-pens {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 10;
  font-family: "Montserrat";
  font-size: 12px;
}

a.white-mode, a.white-mode:link, a.white-mode:visited, a.white-mode:active {
  font-family: "Montserrat";
  font-size: 12px;
  text-decoration: none;
  background: #212121;
  padding: 4px 8px;
  color: #f7f7f7;
}
a.white-mode:hover, a.white-mode:link:hover, a.white-mode:visited:hover, a.white-mode:active:hover {
  background: #edf3f8;
  color: #212121;
}

body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
  background: #000000;
}

.title {
  z-index: 10;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  font-family: "Montserrat";
  text-align: center;
  width: 100%;
}
.title h1 {
  position: relative;
  color: #EEEEEE;
  font-weight: 600;
  font-size: 60px;
  padding: 0;
  margin: 0;
  line-height: 1;
  text-shadow: 0 0 30px #000155;
}
.title h1 span {
  font-weight: 600;
  padding: 0;
  margin: 0;
  color: #BBB;
}
.title h3 {
  font-weight: 200;
  font-size: 20px;
  padding: 0;
  margin: 0;
  line-height: 1;
  color: #EEEEEE;
  letter-spacing: 2px;
  text-shadow: 0 0 30px #000155;
}

JavaScript

let particles = [];
let frequency = 50;
// Popolate particles
setInterval(
function () {
  popolate();
}.bind(this),
frequency);

let tela = document.createElement('canvas');
tela.width = $(window).width();
tela.height = $(window).height();
$("body").append(tela);

let canvas = tela.getContext('2d');

class Particle {
  constructor(canvas, options) {
    let random = Math.random();
    this.canvas = canvas;

this.x = options.x;
    this.y = options.y;
    this.s = 0.5 + Math.random();
    this.a = 0;
    this.w = $(window).width();
    this.h = $(window).height();
    this.radius = options.radius || 0.5 + Math.random() * 10;
    this.color = options.color || "#E5483F";

setTimeout(function () {
      if (this.radius > 0.5) {
        particles.push(
        new Particle(canvas, {
          x: this.x,
          y: this.y,
          color: this.radius / 2 > 1 ? "#d6433b" : "#FFFFFF",
          radius: this.radius / 2.2 }));

}
    }.bind(this), 3000);
  }

render() {
    this.canvas.beginPath();
    this.canvas.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
    this.canvas.lineWidth = 2;
    this.canvas.fillStyle = this.color;
    this.canvas.fill();
    this.canvas.closePath();
  }

swapColor() {
    if (this.color != "#FFFFFF") {
      if (this.x < this.w / 2) {
        this.color = "#36fcfa";
      } else {
        this.color = "#E5483F";
      }
    }
  }

move() {
    this.swapColor();
    this.x += Math.cos(this.a) * this.s;
    this.y += Math.sin(this.a) * this.s;
    this.a += Math.random() * 0.8 - 0.4;

if (this.x < 0 || this.x > this.w - this.radius) {
      return false;
    }

if (this.y < 0 || this.y > this.h - this.radius) {
      return false;
    }
    this.render();
    return true;
  }}

/*
      * Function to clear layer canvas
      * @num:number number of particles
      */
function popolate() {
  particles.push(
  new Particle(canvas, {
    x: $(window).width() / 2,
    y: $(window).height() / 2 }));

return particles.length;
}

function clear() {
  canvas.globalAlpha = 0.04;
  canvas.fillStyle = '#000042';
  canvas.fillRect(0, 0, tela.width, tela.height);
  canvas.globalAlpha = 1;
}

function update() {
  particles = particles.filter(function (p) {
    return p.move();
  });
  clear();
  requestAnimationFrame(update.bind(this));
}
update();

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