使用 HTML5 Canvas 移除动画的纯色背景

Question

我已经按照here 的回答在纯 CSS 和 HTML5 中制作噪音动画。

当背景为纯色时效果很好，但是我怎样才能使它在电影背景上看起来很好呢？

您可以看到有问题的页面here。

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

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

Answer 1

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

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

当背景是纯色时，:after 会隐藏真实的文本，而 :before 会因此看起来有问题。

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

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

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

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

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