如何在Javascript或CSS中实现全背景烟雾效果

Question

im试图使用以下代码：

http://codepen.io/MIML/pen/iBKyC

canvas {
    position:absolute;
    margin-left : 50%;
    left: -150px;
}

在我的页面底部放一些烟，但我在搜索如何使用100%的宽度！

你知道，我页面的底部都是烟雾。

谢谢。

Answer 1

很酷！通常我们不会为您编写代码，但这一个由我负责。

首先，将CSS代码更改为：

canvas {
  position: absolute;
  width: 100%; height: 200px;
  bottom: 0px; left: 0px;
}

这将横跨整个页面的画布，但不会有足够的"烟雾"。

要添加更多烟雾，请将spawn()功能替换为此！

function spawn() {
    if(new Date().getTime() > lastTime + minSpawnTime) {
      lastTime = new Date().getTime();
      parts.push(new smoke(0, emitterY));
      parts.push(new smoke(50, emitterY));
      parts.push(new smoke(100, emitterY));
      parts.push(new smoke(150, emitterY));
      parts.push(new smoke(200, emitterY));
      parts.push(new smoke(250, emitterY));
      parts.push(new smoke(300, emitterY));
    }
}

希望你喜欢！