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

标签 javascript css html canvas

我已经按照 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/

相关文章:

javascript - 如何使用 node.js 中的 nodemailer 和请求模块将图像附加到来自 URL 的电子邮件?

javascript - 使用 ng-sortable 禁用页面滚动

html - Bootstrap 容器不是全宽(屏幕左右两侧的空白区域)?

javascript - 对具有多个实例的每个单个元素的 jQuery 操作

javascript - 保存位置的可排序 Div

javascript - 在 div 中使用图像而不使用 <img> 标签

javascript - 无法使用 mocha 和 supertest 测试 OPTIONS 方法

javascript - 限制接受包含非英文字符的电子邮件

html - 为什么 <ul> 标签中的 HTML 没有出现在这个 jsfiddle 中

css - 嵌套的 flex 盒在不同浏览器中的工作方式不同