科幻片粒子盾牌粒子流动动画效果-html代码-BFW代码库

科幻片粒子盾牌粒子流动动画效果

代码语言：html

所属分类：粒子

代码描述：科幻片粒子盾牌粒子流动动画效果

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
html, body {
  margin: 0;
  overflow: hidden;
  background: #151a28;
}

canvas {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
}
</style>

</head>
<body translate="no">

<script>
/*
 * Noel Delgado - @pixelia_me
 */

(function () {
  var ctx, w, h, cx, cy, PI, PI_HALF, cos, sin, random, lineWidth, C,
  rings, ringsLength, data;

  ctx = document.createElement('canvas').getContext('2d');
  w = 600;
  h = 600;
  cx = w / 2;
  cy = h / 2;
  rings = [];
  ringsLength = 0;

  PI = Math.PI;
  PI_HALF = PI / 2;
  cos = Math.cos;
  sin = Math.sin;
  random = Math.random;

  lineWidth = 0.2;
  C = ["#ABF8FF", "#E76B76", "#1D2439", "#4F3762", "#67F9FF", "#0C0F18"];

  data = [
  /* ring {t:total_particles, r:radius, d:distance, s:speed, c:color} */
  [
  { t: 80, r: cx - 10, d: 40, s: 30, c: C[1] },
  { t: 60, r: cx - 20, d: 40, s: 80, c: C[2] },
  { t: 20, r: cx - 30, d: 20, s: 80, c: C[2] }],

  [
  { t: 80, r: cx - 80, d: 40, s: 40, c: C[4] },
  { t: 80, r: cx - 90, d: 20, s: 40, c: C[4] },
  { t: 20, r: cx - 100, d: 20, s: 40, c: C[2] },
  { t: 40, r: cx - 110, d: 20, s: 40, c: C[2] }],

  [
  { t: 60, r: cx - 160, d: 40, s: 20, c: C[2] },
  { t: 20, r: cx - 170, d: 30, s: 60, c: C[2] },
  { t: 40, r: cx - 180, d: 40, s: 60, c: C[2] }],

  [
  { t: 40, r: cx - 230, d: 40, s: 20, c: C[5] },
  { t: 20, r: cx - 240, d: 20, s: 10, c: C[5] }],

  [
  { t: 10, r: cx - 290, d: 10, s: 10, c: C[4] }]];



  /* */
  ctx.canvas.width = w;
  ctx.canvas.height = h;
  document.body.appendChild(ctx.canvas);

  data.forEach(function (group) {
    var ring = [];

    group.forEach(function (orbit, i) {
      var total_particles, index;

      total_particles = orbit.t;
      index = 0;

      for (; index < total_particles; index++) {
        var radius, distance, speed, color, opacity;

        radius = orbit.r;
        distance = orbit.d;
        speed = random() / orbit.s;
.........完整代码请登录后点击上方下载按钮下载查看