加载动画

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

function Circle (x, y, radius) {
  this.x = x;
  this.y = y;
  this.radius = radius;
  this.angle = 0;
}

function Star (x, y, rotation) {
  this.x = x;
  this.y = y;
  this.length = 15;
  this.scaleX = .1;
  this.scaleY = .1;
  this.rotation = rotation;
  this.angle = Math.random() * 360;
  this.vx = 0;
  this.vy = 0;
  this.alpha = 1;
}

Star.prototype.draw = function(ctx) {
  ctx.save();
  ctx.globalAlpha = this.alpha;
  ctx.translate(this.x, this.y);
  ctx.rotate(this.rotation * Math.PI / 180);
  ctx.beginPath();
  ctx.moveTo(0,0);
  ctx.lineTo(24,0);
  ctx.lineTo(24,24);
  ctx.lineTo(0,24);
  ctx.closePath();
  ctx.scale(this.scaleX, this.scaleY);
  ctx.strokeStyle = 'rgba(0,0,0,0)';
  ctx.lineCap = 'butt';
  ctx.lineJoin = 'miter';
  ctx.miterLimit = 4;
  ctx.save();
  ctx.fillStyle = "#ffffff";
  ctx.beginPath();
  ctx.moveTo(12,0.89);
  ctx.lineTo(15.609,8.204);
  ctx.lineTo(23.682,9.377);
  ctx.lineTo(17.842,15.071);
  ctx.lineTo(19.22,23.11);
  ctx.lineTo(12,19.315);
  ctx.lineTo(4.78,23.11);
  ctx.lineTo(6.159,15.071);
  ctx.lineTo(0.318,9.377);
  ctx.lineTo(8.39,8.204);
  ctx.lineTo(12,0.89);
  ctx.closePath();
  ctx.fill();
  ctx.stroke();
  ctx.restore();
  ctx.restore();
};

function Square(x, y) {
  this.x = x;
  this.y = y;
}

var canvas = document.querySelector('canvas'),
    ctx = canvas.getContext('2d'),
    W = canvas.width = window.innerWidth,
    H = canvas.height = window.innerHeight,
    stars = [],
    circle = new Circle(W / 2, H / 2, 110),
    square = new Square(W / 2, H / 2);

function animateRect(square) {
  var star, counter = 0;
  square.x = W / 2 + (circle.radius * Math.cos(circle.angle * .047));
  square.y = H / 2 + (circle.radius * Math.sin(circle.angle * .047));
  circle.angle++;
  stars.push(new Star(square.x, square.y, Math.random() * 360));
}

(function drawFrame(){
  window.requestAnimationFrame(drawFrame, canvas);
  ctx.fillStyle = '#0f1476';
  ctx.fillRect(0, 0, W, H); 
  animateRect(square);
  moveStars();
}());

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