css3实现蒙版弹幕功能

最新推荐文章于 2024-02-17 22:42:33 发布

暮　色

最新推荐文章于 2024-02-17 22:42:33 发布

阅读量1.6k

点赞数 1

分类专栏：前端 JavaScript 蒙版弹幕文章标签： css 前端

本文链接：https://blog.csdn.net/infotw/article/details/94326139

版权

本文介绍了如何利用CSS3的mask遮罩属性来实现智能防挡弹幕效果，类似于Photoshop的蒙版功能。通过设置蒙版的alpha值，达到隐藏或显示下方元素的目的。文章提供了HTML和CSS代码示例，展示了从底图设置到添加弹幕的全过程，最终实现动态弹幕同时不遮挡背景画面。

摘要由CSDN通过智能技术生成

最近在b站上看到一种弹幕效果叫做智能防挡弹幕，也就是传说中的蒙版弹幕，打开之后效果大概是这样的
在这里插入图片描述

再也不用担心男神女神的绝世容颜被花里胡哨的弹幕挡住啦，是不是感觉很神奇。

实现原理其实就是类似于ps的蒙版，也就是说将图像的一部分 “隐藏”。这里我们需要用到的是css3的mask遮罩属性。

CSS mask

CSS mask遮罩属性的历史非常久远了，远到比CSS3 border-radius等属性还要久远，最早是出现在Safari浏览器上的，差不多可以追溯到09年。但是那个时候还是ie的天下，考虑到兼容性，所有没有被推广起来。不过现在，ie已经是过去式了，所以可以放心使用了。

使用起来也比较简单

<img src="ps1.jpg" class="mask-image">

css代码如下：

.mask-image {
    width: 250px;
    height: 187.5px;
    -webkit-mask-image: url(mask.png);
    mask-image: url(mask.png);
}

蒙板可以是 CSS3 渐变或者半透明的PNG图片，蒙板元素的alpha值为0的时候会覆盖下面的元素，为1的时候会完全显示下面的内容。效果大概是这样：

关注

专栏目录