我已经按照 here 的答案进行操作用纯 CSS 和 HTML5 制作有声动画。
当背景为纯色时它工作正常,但我如何才能让它在电影背景上看起来更好?
可以看到有问题的页面here .
如果您仔细观察,您会注意到电影顶部的黑色背景。 如果我删除背景或使背景透明,它会将总体风格更改为更“大胆”的外观,这不是我想要的。
我可以只使用 css 和 html 来实现我想要的东西,还是我需要使用一些 javascript 等?
最佳答案
我相信这是您正在使用的“故障”动画的一个属性。
:before 的偏移量为 -2px,:after 的偏移量为 2px。 这使得文本看起来加粗了 4 像素。
当背景是纯色时,:after 隐藏了真实的文本,而 :before 因此看起来像是有故障。
但是如果你不隐藏带有背景颜色的内容,那么确实,它看起来像粗体。
根据您想要的效果,您可能希望使用关键帧中的剪辑值并使原始颜色透明:
.glitch { color: transparent; }
.glitch::before { background: transparent; }
.glitch::after { background: transparent; }
然后播放关键帧的剪辑值(您可能已经这样做了)以获得所需的结果。
请注意,这肯定会产生另一种效果,它可能不再是您要找的东西。但是您使用的故障技术是依靠背景来部分隐藏文本。
关于javascript - 使用 HTML5 Canvas 去除动画的纯色背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40092166/