经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » HTML/CSS » CSS3 » 查看文章
css3实现蒙版弹幕功能_css3_CSS
来源:jb51  时间:2019/6/19 8:40:58  对本文有异议

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

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

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

CSS mask

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

使用起来也比较简单

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

css代码如下:
 

  1. .mask-image {
  2. width: 250px;
  3. height: 187.5px;
  4. -webkit-mask-image: url(mask.png);
  5. mask-image: url(mask.png);
  6. }

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

关于mask的更多属性及参数这里就不一一研究了,具体可以看这篇文章:https://www.zhangxinxu.com/wordpress/2017/11/css-css3-mask-masks/

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

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

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

显示代码如下:

html部分:

  1. <div class="container">
  2. <div class="barrage-wrapper">
  3. </div>
  4. </div>

css部分:

  1. .container {
  2. width: 900px;
  3. height: 506px;
  4. background: url(banner.jpg) no-repeat center;
  5. background-size: cover;
  6. }
  7. .barrage-wrapper {
  8. width: 100%;
  9. height: 100%;
  10. position: relative;
  11. mask-image: url(mask.png);
  12. -webkit-mask-image: url(mask.png);
  13. }

先看下效果:

好吧,什么也看不出来。不过实际上人物已经加上了蒙版

加点弹幕试试效果。

添加弹幕动画效果和样式

  1. @keyframes barrage{
  2. from{
  3. left:100%;
  4. transform:translateX(0);
  5. }
  6. to{
  7. left:0;
  8. transform:translateX(-100%);
  9. }
  10. }
  11. .block{
  12. position:absolute;
  13. top: 50%;
  14. left: 100%;
  15. width: 100%;
  16. color: #fff;
  17. }

添加弹幕的js脚本

  1. // 生成一个0~range的随机数
  2. const geneNumber = range => Math.floor(Math.random() * range)
  3. var barrages = [
  4. '空降成功', '真香警告', '温馨提示,前方请调高音量/赶紧戴耳机', '弹幕护体!弹幕护体!弹幕护体!', ' 以上企业均已破产', '前方高能', '我从未见过如此厚颜无耻之人', '完结撒花',
  5. '空降成功', '真香警告', '温馨提示,前方请调高音量/赶紧戴耳机', '弹幕护体!弹幕护体!弹幕护体!', ' 以上企业均已破产', '前方高能', '我从未见过如此厚颜无耻之人', '完结撒花',
  6. '空降成功', '真香警告', '温馨提示,前方请调高音量/赶紧戴耳机', '弹幕护体!弹幕护体!弹幕护体!', ' 以上企业均已破产', '前方高能', '我从未见过如此厚颜无耻之人', '完结撒花',
  7. '空降成功', '真香警告', '温馨提示,前方请调高音量/赶紧戴耳机', '弹幕护体!弹幕护体!弹幕护体!', ' 以上企业均已破产', '前方高能', '我从未见过如此厚颜无耻之人', '完结撒花',
  8. '空降成功', '真香警告', '温馨提示,前方请调高音量/赶紧戴耳机', '弹幕护体!弹幕护体!弹幕护体!', ' 以上企业均已破产', '前方高能', '我从未见过如此厚颜无耻之人', '完结撒花',
  9. '空降成功', '真香警告', '温馨提示,前方请调高音量/赶紧戴耳机', '弹幕护体!弹幕护体!弹幕护体!', ' 以上企业均已破产', '前方高能', '我从未见过如此厚颜无耻之人', '完结撒花',
  10. '空降成功', '真香警告', '温馨提示,前方请调高音量/赶紧戴耳机', '弹幕护体!弹幕护体!弹幕护体!', ' 以上企业均已破产', '前方高能', '我从未见过如此厚颜无耻之人', '完结撒花',
  11. ]
  12. const wrapper = document.querySelector('.barrage-wrapper')
  13. for (const item of barrages) {
  14. const block = document.createElement('div')
  15. block.classList.add('block')
  16. block.style.top = geneNumber(486) + 'px' // 弹幕的位置不能超过容器的高度
  17. block.style.animation = `barrage ${geneNumber(20)}s linear ${geneNumber(60)}s` // 随机动画效果
  18. block.textContent = item
  19. wrapper.appendChild(block)
  20. }

再看看效果

总结

以上所述是小编给大家介绍的基于css3实现蒙版弹幕功能,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号