滤色混合模式与图像视频动效

效果

例如我们有下面一张底图，森林和小鹿：

然后，有以下一些特效前景图：

分别和提供的底图进行混合，可以看到如下图所示的实时效果：

滤色混合模式不仅可以作用于图像，还可以用于视频，同样的，只要我们把视频的底色做成黑色，就能很好得和网页背景融为一体。

例如这里有个网页截图，还有一个二次元风格的场景图：

然后还有两个黑色背景的视频特效素材，分别是礼花绽放和瓢泼大雨（视频不动请点击）：

通过设置video元素混合模式为screen，可以得到下面所示的精彩效果（视频不动请点击）：

代码

img, video {
    mix-blend-mode: screen;
}

<div class="box box-2">
    <img src="./rains.jpg">
</div>

可参见这篇文章：深入理解CSS mix-blend-mode滤色screen混合模式