使用 CSS3 和 jQuery 的故障效果

Question

这种毛刺效应是如何产生的？ [参见下面的 GIF 动画]

来源： https://jigsaw.google.com/

我们可以在 CSS3 和 jQuery 中重新创建 Glitch 效果吗？

这是我开始的 codepen：http://codepen.io/surjithctly/pen/yeWzrQ

Any Help would be appreciated!

Answer 1

您检查/观察浏览器中发生的情况（右键单击 - 检查）。 它很快，但看起来像他们：

• 创建元素的副本
• 缩小副本以裁剪文本
• 稍微重新排列副本

这就像制作照片的复写本，将它们切割成碎片并重新排列。