Question

我不知道为什么，但是即使将CSS / JS文件链接到HTML之后，我也看不到动画。这是代码（我只能看到h1）：

var stats,
  particles = [];

Math.range = function(min, max) {
  if (!max) {
    max = min;
    min = 0;
  }
  return min + Math.random() * (max - min);
};

Math.chance = function(probability) {
  if (!probability) {
    probability = 0.5;
  }
  return Math.random() < probability;
};

function toRGB(hex) {
  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return result ? {
    r: parseInt(result[1], 16),
    g: parseInt(result[2], 16),
    b: parseInt(result[3], 16)
  } : null;
}

function Particle() {
  this.isActive = (Math.chance(0.5));
}

Particle.COLORS = ['#ff0000', '#daede6', '#a3d9cc', '#738076', '#734357', '#f5496b', '#e3b1be'];

Particle.prototype.init = function() {
  this.radius = 1;
  this.color = toRGB(Particle.COLORS[Math.round(Math.random() * (Particle.COLORS.length - 1))]);
  this.alpha = 1;
  this.fade = Math.range(0.005, 0.25);
  this.grow = (this.fade > 0.01) ? Math.range(0.25, 0.5) : Math.range(0.05, 0.4);

  if (!this.isActive) {
    this.x += Math.range(-10, 10);
    this.y += Math.range(-10, 10);
  }
};

Particle.prototype.update = function() {
  if (this.isActive) {
    this.alpha -= this.fade;
    this.radius += this.grow;
  }
  if (this.alpha <= 0) {
    this.init();
  }
};

Particle.prototype.draw = function(ctx) {
  ctx.beginPath();
  ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI, false);
  ctx.fillStyle = 'rgba(' + this.color.r + ', ' + this.color.g + ', ' + this.color.b + ', ' + this.alpha + ')';
  ctx.fill();
};

* {
  margin: 0;
  padding: 0;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #ebe9e1;
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #FFFFFF), color-stop(100%, #ebe9e1));
  background: -webkit-radial-gradient(center, ellipse cover, #FFFFFF 0%, #ebe9e1 100%);
  background: -moz-radial-gradient(center, ellipse cover, #FFFFFF 0%, #ebe9e1 100%);
  background: -ms-radial-gradient(center, ellipse cover, #FFFFFF 0%, #ebe9e1 100%);
  background: -o-radial-gradient(center, ellipse cover, #FFFFFF 0%, #ebe9e1 100%);
  background: radial-gradient(ellipse at center, #FFFFFF 0%, #ebe9e1 100%);
}

#stats {
  position: absolute;
  z-index: 10;
  left: 10px;
  top: 10px;
}

h1 {
  text-align: center;
  margin-top: 5%;
  font-family: 'Kaushan Script', cursive;
  font-size: 30px;
  text-transform: uppercase;
}

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
  <link href="https://fonts.googleapis.com/css?family=Kaushan+Script|Major+Mono+Display|Montserrat|Permanent+Marker" rel="stylesheet">
  <script type="text/javascript" src="site.js"></script>
</head>

我只包括了head标签，因为剩下的对于解决我的问题不是那么重要。为了显示动画我该怎么办？如果我打开index.html页面，则看不到想要的动画。

Answer 1

包括草图的代码或包括sketch.js的脚本包括素描JS后，我就可以使用它

链接样式表后CSS / JS动画不起作用

1 个答案: