javascript - 使用 HTML5 Canvas 去除动画的纯色背景

Question

我已经按照 here 的答案进行操作用纯 CSS 和 HTML5 制作有声动画。

当背景为纯色时它工作正常，但我如何才能让它在电影背景上看起来更好？

可以看到有问题的页面here .

如果您仔细观察，您会注意到电影顶部的黑色背景。如果我删除背景或使背景透明，它会将总体风格更改为更“大胆”的外观，这不是我想要的。

我可以只使用 css 和 html 来实现我想要的东西，还是我需要使用一些 javascript 等？

Answer 1

我相信这是您正在使用的“故障”动画的一个属性。

:before 的偏移量为 -2px，:after 的偏移量为 2px。这使得文本看起来加粗了 4 像素。

当背景是纯色时，:after 隐藏了真实的文本，而 :before 因此看起来像是有故障。

但是如果你不隐藏带有背景颜色的内容，那么确实，它看起来像粗体。

根据您想要的效果，您可能希望使用关键帧中的剪辑值并使原始颜色透明:

.glitch { color: transparent; }
.glitch::before { background: transparent; }
.glitch::after { background: transparent; }

然后播放关键帧的剪辑值(您可能已经这样做了)以获得所需的结果。

请注意，这肯定会产生另一种效果，它可能不再是您要找的东西。但是您使用的故障技术是依靠背景来部分隐藏文本。