在JavaScript動畫畫布上覆蓋動畫div

Question

我最近發現了一個帶有一些JavaScript的codepen，它創建了一個很酷的節點效果： http ://codepen.io/thetwistedtaste/pen/GgrWLp

以及使用@keyframes動畫對文本的這種“毛刺”效果： http ://codepen.io/anon/pen/YyjLJZ

我想在我的練習網站上實現這兩個功能，但是我發現很難將帶有動畫的文本放置在畫布上。

這是我目前所擁有的：

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 ，並且需要供應商前綴。 有關演示，請參見此CodePen 。