图片弹幕蒙版java实现_通过css3实现蒙版弹幕

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

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

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

CSS mask

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

使用起来也比较简单

css代码如下：

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

}

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

好了，有了这个属性我们就可以愉快的实现蒙版弹幕了

首先，需要一张底图，模拟为视频的某一帧的图片

然后我们需要一个蒙版，遮住背景中的人物

显示代码如下：

html部分：

图片弹幕蒙版java实现_通过css3实现蒙版弹幕相关推荐

鸿蒙钉钉app,钉钉鸿蒙版app下载_钉钉鸿蒙版app最新版下载 5.1.25
钉钉鸿蒙版app是钉钉官方专门为鸿蒙系统手机用户使用的钉钉软件,钉钉作为现在办公学习的必备软件成为了很多企业用户的选择,而钉钉鸿蒙版app作为钉钉新版优化,功能更加的齐全流畅! 钉钉鸿蒙版app功能: ...
【源码+图片素材】Java王者荣耀游戏开发_开发Java游戏项目【王者荣耀】1天搞定！！！腾讯游戏_Java课程设计_Java实战项目_Java初级项目
王者荣耀是当下热门手游之一,小伙伴们是否想过如何制作一款属于自己的王者荣耀游戏呢? 本课程讲解了一个王者荣耀游戏的详细编写流程,即使你是刚入门Java的新手,只要你简单掌握了该游戏所需要的JavaSE ...
转jpg java源程序_将pdf文件转成图片并删除java源代码
将pdf文件转成图片并删除java源代码/** * 将pdf转成img */ public static void changePdfToImg() { try { File file = new F ...
java 图片运动_怎么在GUI中用键盘控制图片运动？java问题？
怎么在GUI中用键盘控制图片运动?java问题? 关注:174 答案:3 mip版解决时间 2021-01-17 01:03 提问者落叶.牵绊着思念 2021-01-16 09:43 怎么在GU ...
JAVA入门_多线程_邮局派发信件
JAVA入门_多线程_邮局派发信件 Postman package cn.campsg.java.experiment.entity;public class Postman {private Str ...
java 多线程写缓存,Java多线程_缓存对齐
1.什么是缓存对齐当前的电脑中,数据存储在磁盘上,可以断电保存,但是读取效率较低.不断电的情况下,数据可以在内存中存储,相对硬盘效率差不多是磁盘的一万倍左右.但是运算时,速度最快的是直接缓存在CPU ...
复习Java异常处理_异常分类_自定义异常_线程初步了解
复习Java异常处理_异常分类_自定义异常_线程主要内容异常.线程教学目标第一章异常 1.1 异常概念异常,就是不正常的意思.在生活中:医生说,你的身体某个部位有异常,该部位和正常相比有点 ...
如何将夜晚图片转化为白天图片 matlab,教你简单几步将白天图片转换成夜景图_资源库...
摘要:教你简单几步将白天图片转换成夜景图_资源库摘要:今天分享一个有趣的教程,教大家利用滤镜和调整图层,简单几步将白天图片变成夜景图,特别实用,还能学到一个鲜为人知的调色功能,看看赶紧练练吧. 原图 ...
java项目-第127期SpringBoot+vue的智慧养老手表管理系统-java毕业设计_计算机毕业设计
java项目-第127期SpringBoot+vue的智慧养老手表管理系统-java毕业设计_计算机毕业设计 [源码请到资源专栏下载] 本系统主要是通过智能手表监控老人的日常生活,比如血压.心率.睡眠 ...
java图片裁剪和java生成缩略图
一.缩略图在浏览相册的时候,可能需要生成相应的缩略图. 直接上代码: public class ImageUtil {private Logger log = LoggerFactory.getLo ...

图片弹幕蒙版java实现_通过css3实现蒙版弹幕

图片弹幕蒙版java实现_通过css3实现蒙版弹幕相关推荐

最新文章

热门文章