javascript - 使用 jQuery 模拟 CMYK 印版偏移

Question

我想对页面文本中的某些词产生视觉干扰效果，以在屏幕上模拟打印海报、杂志时可能发生的校准/偏移错误......

想法是在文本中随机选择一个目标词，然后将其包裹在<span class="cmyk intensity-max">中。 .然后我会将相邻的单词包装在 <span class="cmyk intensity-medium"> 中并关注 <span class="cmyk intensity-min"> .目标是打乱文本中的一个区域，而不是单个单词(我对我在打扰中强调渐进性的想法不太满意)。

然后，我得到了一个函数，该函数将跨度的内容复制三次，影响与初始跨度的相对位置，以及对另一个的绝对位置和 c/m/y 颜色。

我的问题是关于在性能方面实现这种效果的最佳方式，以及关于如何处理文本的内部标记(链接、strongs、ems)。

Answer 1

这是发生打印错误的演示:)

DEMO jsBin

使用 CSS:

  .errata{    
     color: black;
     text-shadow: 2px 0 cyan, -1px -1px magenta, 1px 2px yellow;
  }

它并不完美，但您可以尝试使用这个想法。