css - 是否可以在具有混合混合模式的动画画布后面使用静态背景？

Question

我正在尝试创建一个动画，其中每个元素都会根据父 div 的背景更改其颜色。我正在使用pts.js制作动画。它在画布上绘制所有内容。

这是我的设置：fiddle。

添加mix-blend-mode: difference;到画布后，尽管画布 (#pt) 的背景设置为透明，但整个渐变背景都会消失。我希望动画线条像静态文本一样动态改变它们的颜色。我怎样才能实现它？纯CSS甚至可以吗？

Answer 1

您可以将渐变放在画布顶部（使用::before伪元素），然后mix-blend-mode将起作用：

$(document).ready(() => {
  Pts.namespace(window);
  const run = Pts.quickStart("#pt", "transparent");
  let pts = new Group();
  space.add({
    start: () => {
      pts = Create.distributeRandom(space.bound, 50);
    },
    animate: (time, ftime) => {
      const perpend = new Group(
        new Pt(0, 0),
        new Pt(0, window.innerWidth)
      ).op(Line.perpendicularFromPt);
      pts.rotate2D(0.0055, space.center);
      pts.forEach((p, i) => {
        const lp = perpend(p);
        form.stroke(`rgba(255,255,255,255`, 1.01).line([p, lp]);
        form.fillOnly(`#000000`).point(p, 1);
      });
    },

  });
  space.bindMouse().bindTouch().play();
});

html {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  text-size-adjust: 100%;
}

#staticBg {
  height: 100vh;
  width: 100vw;
  top: 0;
  left: 0;
  position: fixed;
}

#staticBg::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 1) 20%, rgba(255, 255, 255, 1) 60%);
  content: '';
  mix-blend-mode: difference;
  z-index: 1;
}

#pt {
  height: 100vh;
  width: 100vw;
  top: 0;
  left: 0;
  position: fixed;
}

.text {
  color: white;
  font-size: 50px;
  text-align: center;
  width: 100vw;
  mix-blend-mode: difference;
  z-index: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pts/0.8.8/pts.min.js"></script>
<div id="staticBg">
  <canvas id="pt"></canvas>
  <div class="text">TEST STRING</div>
</div>