css3实现蒙版弹幕功能


Posted in HTML / CSS onJune 18, 2019

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

css3实现蒙版弹幕功能

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

实现原理其实就是类似于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的时候会完全显示下面的内容。效果大概是这样:

css3实现蒙版弹幕功能

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

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

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

css3实现蒙版弹幕功能

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

css3实现蒙版弹幕功能

显示代码如下:

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);
}

先看下效果:

css3实现蒙版弹幕功能

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

加点弹幕试试效果。

添加弹幕动画效果和样式

@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实现蒙版弹幕功能

总结

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

HTML / CSS 相关文章推荐
css3的@media属性实现页面响应式布局示例代码
Feb 10 HTML / CSS
css3设置box-pack和box-align让div里面的元素垂直居中
Sep 01 HTML / CSS
浅析rem和em和px vh vw和% 移动端长度单位
Apr 28 HTML / CSS
CSS3中的常用选择器使用示例整理
Jun 13 HTML / CSS
CSS3利用text-shadow属性实现多种效果的文字样式展现方法
Aug 25 HTML / CSS
CSS3 创建网页动画实现弹跳球动效果
Oct 30 HTML / CSS
HTML5 和小程序实现拍照图片旋转、压缩和上传功能
Oct 08 HTML / CSS
用HTML5.0制作网页的教程
May 30 HTML / CSS
整理的15个非常有用的 HTML5 开发教程和速查手册
Oct 18 HTML / CSS
HTML5+CSS3实现机器猫
Oct 17 HTML / CSS
手机端用rem+scss做适配的详解
Nov 15 HTML / CSS
关于webview适配H5上传照片或者视频文件的方法
Nov 04 HTML / CSS
CSS3中媒体查询结合rem布局适配手机屏幕
Jun 10 #HTML / CSS
纯CSS3制作页面切换效果的实例代码
May 30 #HTML / CSS
CSS3 分类菜单效果
May 27 #HTML / CSS
css3实现六边形边框的实例代码
May 24 #HTML / CSS
css和css3弹性盒模型实现元素宽度(高度)自适应
May 15 #HTML / CSS
css3实现可拖动的魔方3d效果
May 07 #HTML / CSS
CSS3 实现童年的纸飞机
May 05 #HTML / CSS
You might like
当海贼王变成JOJO风
2020/03/02 日漫
php设计模式 Proxy (代理模式)
2011/06/26 PHP
PHP自定义函数获取URL中一级域名的方法
2016/08/23 PHP
初识javascript 文档碎片
2010/07/13 Javascript
jquery 按钮状态效果 正常、移上、按下
2013/08/12 Javascript
不提示直接关闭网页窗口的JS示例代码
2013/12/17 Javascript
使用原生js封装webapp滑动效果(惯性滑动、滑动回弹)
2014/05/06 Javascript
深入理解JavaScript系列(46):代码复用模式(推荐篇)详解
2015/03/04 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(二)
2015/12/10 Javascript
NodeJS的Promise的用法解析
2016/05/05 NodeJs
JavaScript中0和&quot;&quot;比较引发的问题
2016/05/26 Javascript
深入浅出ES6新特性之函数默认参数和箭头函数
2016/08/01 Javascript
js控制文本框只能输入中文、英文、数字与指定特殊符号的实现代码
2016/09/09 Javascript
利用nodejs监控文件变化并使用sftp上传到服务器
2017/02/18 NodeJs
详解ES6之用let声明变量以及let loop机制
2017/07/15 Javascript
详解JS数值Number类型
2018/02/07 Javascript
js中Array对象的常用遍历方法详解
2019/01/17 Javascript
微信小程序 textarea 层级过高问题简单解决方案
2019/10/14 Javascript
JavaScript Tab菜单实现过程解析
2020/05/13 Javascript
[58:57]2018DOTA2亚洲邀请赛3月29日小组赛B组 Effect VS VGJ.T
2018/03/30 DOTA
Python编写检测数据库SA用户的方法
2014/07/11 Python
python实现时间o(1)的最小栈的实例代码
2018/07/23 Python
Python 网络编程之UDP发送接收数据功能示例【基于socket套接字】
2019/10/11 Python
Opencv求取连通区域重心实例
2020/06/04 Python
元宵节晚会主持人串词
2014/03/25 职场文书
家长对学生的评语
2014/04/18 职场文书
求职信怎么写
2014/05/23 职场文书
2014年护士长工作总结
2014/11/11 职场文书
2014年化验室工作总结
2014/11/21 职场文书
答谢词范文
2015/01/05 职场文书
清明节主题班会
2015/08/14 职场文书
制定企业培训计划的五大要点!
2019/07/10 职场文书
农村房屋租赁合同(范本)
2019/07/23 职场文书
导游词之西安大清真寺
2019/12/17 职场文书
90行Python代码开发个人云盘应用
2021/04/20 Python
JavaScript 实现页面滚动动画
2021/04/24 Javascript