最近在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的时候会完全显示下面的内容。效果大概是这样：
关于mask的更多属性及参数这里就不一一研究了，具体可以看这篇文章：https://www.zhangxinxu.com/wordpress/2017/11/css-css3-mask-masks/
好了，有了这个属性我们就可以愉快的实现蒙版弹幕了
首先，需要一张底图，模拟为视频的某一帧的图片
然后我们需要一个蒙版，遮住背景中的人物
显示代码如下：
html部分：
<div class="container">
<div class="barrage-wrapper">
</div>
</div>
css部分：
.container {
width: 900px;
height: 506px;
background: url(banner.jpg) no-repeat center;
background-size: cover;
}
.barrage-wrapper {
width: 100%;
height: 100%;
position: relative;
mask-image: url(mask.png);
-webkit-mask-image: url(mask.png);
}
先看下效果：
好吧，什么也看不出来。不过实际上人物已经加上了蒙版
加点弹幕试试效果。
添加弹幕动画效果和样式
@keyframes barrage{
from{
left:100%;
transform:translateX(0);
}
to{
left:0;
transform:translateX(-100%);
}
}
.block{
position:absolute;
top: 50%;
left: 100%;
width: 100%;
color: #fff;
}
添加弹幕的js脚本
// 生成一个0~range的随机数
const geneNumber = range => Math.floor(Math.random() * range)
var barrages = [
'空降成功', '真香警告', '温馨提示，前方请调高音量/赶紧戴耳机', '弹幕护体！弹幕护体！弹幕护体！', ' 以上企业均已破产', '前方高能', '我从未见过如此厚颜无耻之人', '完结撒花',
'空降成功', '真香警告', '温馨提示，前方请调高音量/赶紧戴耳机', '弹幕护体！弹幕护体！弹幕护体！', ' 以上企业均已破产', '前方高能', '我从未见过如此厚颜无耻之人', '完结撒花',
'空降成功', '真香警告', '温馨提示，前方请调高音量/赶紧戴耳机', '弹幕护体！弹幕护体！弹幕护体！', ' 以上企业均已破产', '前方高能', '我从未见过如此厚颜无耻之人', '完结撒花',
'空降成功', '真香警告', '温馨提示，前方请调高音量/赶紧戴耳机', '弹幕护体！弹幕护体！弹幕护体！', ' 以上企业均已破产', '前方高能', '我从未见过如此厚颜无耻之人', '完结撒花',
'空降成功', '真香警告', '温馨提示，前方请调高音量/赶紧戴耳机', '弹幕护体！弹幕护体！弹幕护体！', ' 以上企业均已破产', '前方高能', '我从未见过如此厚颜无耻之人', '完结撒花',
'空降成功', '真香警告', '温馨提示，前方请调高音量/赶紧戴耳机', '弹幕护体！弹幕护体！弹幕护体！', ' 以上企业均已破产', '前方高能', '我从未见过如此厚颜无耻之人', '完结撒花',
'空降成功', '真香警告', '温馨提示，前方请调高音量/赶紧戴耳机', '弹幕护体！弹幕护体！弹幕护体！', ' 以上企业均已破产', '前方高能', '我从未见过如此厚颜无耻之人', '完结撒花',
]
const wrapper = document.querySelector('.barrage-wrapper')
for (const item of barrages) {
const block = document.createElement('div')
block.classList.add('block')
block.style.top = geneNumber(486) + 'px' // 弹幕的位置不能超过容器的高度
block.style.animation = `barrage ${geneNumber(20)}s linear ${geneNumber(60)}s` // 随机动画效果
block.textContent = item
wrapper.appendChild(block)
}
再看看效果
总结
以上所述是小编给大家介绍的基于css3实现蒙版弹幕功能，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。
苹果官方表示：
在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。
探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。
Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。
RTX 5090要首发 性能要翻倍！三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。
据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。