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

时间:2016-10-17 17:17:24

标签: javascript html css html5 canvas

我已经按照here的答案来制作纯CSS和HTML5中的noice动画。

当背景有纯色时工作正常,但我怎么能在电影背景上看起来很好看呢?

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

如果你仔细观察,你会注意到电影上的黑色背景。 如果我删除或使背景透明,它将改变一般风格更多"大胆"看,这不是我想要的。

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

1 个答案:

答案 0 :(得分:0)

我相信这是"故障"你正在使用的动画。

:之前的偏移量为-2px,并且之后的偏移量为2px。 这使得文本看起来更加大胆4px。

当背景是实心的时候,那么:隐藏真实文本之后:和之前看起来它有一个小故障。

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

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

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

然后使用关键帧的剪辑值(正如您已经做过的那样)来实现所需的结果。

请注意,这肯定会产生另一种效果,它可能不再是您正在寻找的效果。但您使用的故障技术依赖于背景来部分隐藏文本。