javascript - 在 JavaScript 动画 Canvas 上叠加动画 div

Question

我最近发现了一个带有一些 JavaScript 的代码笔，它创建了一个看起来很酷的节点效果:http://codepen.io/thetwistedtaste/pen/GgrWLp

以及使用@keyframes 动画对文本产生的这种“故障”效果: http://codepen.io/anon/pen/YyjLJZ

我想在我的练习网站上同时实现这两个功能，但我发现很难将带有动画的文本放在 Canvas 顶部。

这是我目前拥有的:

http://codepen.io/anon/pen/EVeVvE

我想要实现的是“文本”与小故障动画以及背景中的移动节点一起位于中心。

这可能吗？

我已经尝试将 z-index 添加到 wrap 类，但我认为我没有正确使用它。

这是它的样子:

  margin: 0 auto;
  text-align: center;
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

我是否需要为动画的每一帧添加一个 z-index？有人能帮我解决这个问题吗？

在不使用 z-index 的情况下，动画效果很好，但文本出现在页面底部，这是我不希望出现的位置。

Answer 1

这适用于最新版本的 Safari 和 Chrome，但是 clip 属性已被弃用，并且在某些浏览器中可能无法使用。 clip-path应该改用，它需要 vendor 前缀。参见 this CodePen用于演示。