css3实现蒙版弹幕功能
建站知识 2021-07-03 07:55www.168986.cn长沙网站建设
最近在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的时候会覆盖狼蚁网站SEO优化的元素,为1的时候会完全显示狼蚁网站SEO优化的内容。效果大概是这样
关于mask的更多属性及参数这里就不一一研究了,具体可以看这篇文章
好了,有了这个属性我们就可以愉快的实现蒙版弹幕了
,需要一张底图,模拟为视频的某一帧的图片
然后我们需要一个蒙版,遮住背景中的人物
显示代码如下
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; : 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. = geneNumber(486) + 'px' // 弹幕的位置不能超过容器的高度 block.style.animation = `barrage ${geneNumber(20)}s linear ${geneNumber(60)}s` // 随机动画效果 block.textContent = item wrapper.appendChild(block) }
再看看效果
以上所述是长沙网络推广给大家介绍的基于css3实现蒙版弹幕功能,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,长沙网络推广会及时回复大家的!
上一篇:三步用CSS写一个商城卡券
下一篇:使用CSS实现黑暗模式和高亮模式的切换功能
长沙网站设计
- 如何自己建一个网站 自己想建个网站,怎么建
- 如何制作网站免费建站 创建网站免费注册
- html简单网页代码 html简单网页代码超链接
- dreamweaver网页制作 dreamweaver网页制作模板
- 上海网站建设 上海网站建设制作微信
- 如何制作网站和网页 如何制作一个网页
- html网页制作代码大全 端午节html网页制作代码大
- app开发公司 app开发公司前十名
- html网页制作 html网页制作文字居中
- app制作一个需要多少钱 请人制作一个app多少钱
- 成都网站制作 成都网站制作维护
- 百度建一个网站多少钱 百度做个公司网站要多少
- html+css网页制作成品 web网页制作成品css+javascrip
- html网页制作案例 html网页设计案例
- html+css网页制作成品 web网页制作成品css+javascrip
- 个人网站模板 个人网站模板HTML