如何在 Javascript 或 CSS 中实现完整的背景烟雾效果

Question

我正在尝试使用此代码：

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

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

你知道的，我页面的所有底部都在冒烟。

谢谢。

Answer 1

很酷的发现！通常我们不会为您编写代码，但这个由我来完成。

首先，将 CSS 代码更改为：

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

这将跨越整个页面 canvas，但 "smoke" 不够。

要添加更多烟雾，请用此替换 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));
    }
}

希望你喜欢！

如何在 Javascript 或 CSS 中实现完整的背景烟雾效果

How can in achieve full background smoke effect in Javascript or CSS

javascript

css

jquery

effect

smoke