在 JavaScript 动画画布上覆盖动画 div答案

【问题标题】：Overlay an animated div on top of a JavaScript animated canvas在 JavaScript 动画画布上覆盖动画 div
【发布时间】：2015-11-05 00:42:46
【问题描述】：

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

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

我想在我的练习网站上实现这两者，但我发现很难将文本与动画一起放在画布顶部。

这是我目前拥有的：

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

这可能吗？

我尝试将 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，动画效果很好，但文本出现在页面底部，这是我不希望出现的位置。

【问题讨论】：

【解决方案1】：

这适用于最新版本的 Safari 和 Chrome，但 clip 属性已被弃用，并且可能在某些浏览器中不起作用。 clip-path 应改为使用，它需要供应商前缀。有关演示，请参阅 this CodePen。

【讨论】：