简体   繁体   English

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

[英]Remove solid background on animation with HTML5 Canvas

I have followed the answer from here to make noice animation in pure CSS and HTML5. 我从这里开始按照答案制作纯CSS和HTML5的noice动画。

It is working fine when background have solid color, but how i can make this look good on movie background? 当背景为纯色时,它工作正常,但是如何使它在电影背景上看起来很好呢?

You can see the page in question here . 您可以在此处查看有问题的页面。

If you look closely you wil notice the black background ontop on movie. 如果仔细看,您会注意到电影上的黑色背景。 If i remove or make background transparent, it will change general style to more "boldish" look, which is not what i am looking for. 如果删除或使背景透明,它将使一般样式变为更“大胆”的外观,这不是我想要的。

Can i archieve what i want using only css and html or do i need to use some javascript etc.? 我可以仅使用CSS和HTML归档我想要的内容,还是需要使用一些JavaScript等?

I believe this is a property of the "glitch" animation you are using. 我相信这是您正在使用的“小故障”动画的属性。

The :before has an offset of -2px and :after has an offset of 2px. :before的偏移量为-2px,:after之后的偏移量为2px。 This makes the text look bolder by 4px together. 这样会使文字加粗4像素。

When the background is solid, then the :after hides the real text and the :before thus it looks like it has a glitch. 当背景稳定时,:after隐藏真实文本,而:before则具有毛刺。

But if you do not hide the content with the background color, then indeed, it looks like bold. 但是,如果您不使用背景颜色隐藏内容,则确实看起来像是粗体。

Depending on the effect you intend to have, you may want to play with the clip values in the keyframes and make the original color transparent: 根据您想要的效果,您可能需要使用关键帧中的剪辑值并使原始颜色透明:

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

Then play with the clip value of the keyframes (as you already did probably) in order to achieve the desired result. 然后播放关键帧的剪辑值(可能已经做过),以获得所需的结果。

Note that this will certainly produce another effect and it may no longer be what you are looking for. 请注意,这肯定会产生另一种效果,它可能不再是您想要的。 But the glitch technique you used is relying on the background to partially hide the text. 但是您使用的故障技术依赖于背景来部分隐藏文本。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM