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 相关文章推荐
纯CSS改变webkit内核浏览器的滚动条样式
Apr 17 HTML / CSS
canvas三角函数模拟水波效果的示例代码
Jul 03 HTML / CSS
HTML5的表单(绝对特别强大的功能)使用示例
Jun 20 HTML / CSS
html5 利用重力感应实现摇一摇换颜色可用来做抽奖等等
May 07 HTML / CSS
H5新属性audio音频和video视频的控制详解(推荐)
Dec 09 HTML / CSS
微信html5页面调用第三方位置导航的示例
Mar 14 HTML / CSS
如何在Canvas中添加事件的方法示例
May 21 HTML / CSS
canvas生成带二维码海报的踩坑记录
Sep 11 HTML / CSS
HTML5 Canvas 实现K线图的示例代码
Dec 23 HTML / CSS
Html5 Canvas实现图片标记、缩放、移动和保存历史状态功能 (附转换公式)
Mar 18 HTML / CSS
video实现有声音自动播放的实现方法
May 20 HTML / CSS
CSS filter 有什么神奇用途
May 25 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
基于curl数据采集之单页面采集函数get_html的使用
2013/04/28 PHP
PHP实现简单搜歌的方法
2015/07/28 PHP
浅谈PHP中静态方法和非静态方法的相互调用
2016/10/04 PHP
phpStudy中升级MySQL版本到5.7.17的方法步骤
2017/08/03 PHP
php+ajax实现无刷新文件上传功能(ajaxuploadfile)
2018/02/11 PHP
stripos函数知识点实例分享
2019/02/11 PHP
PHP实现的用户注册表单验证功能简单示例
2019/02/25 PHP
php 自定义函数实现将数据 以excel 表格形式导出示例
2019/11/13 PHP
网页里控制图片大小的相关代码
2006/06/13 Javascript
javascript IE中的DOM ready应用技巧
2008/07/23 Javascript
JQuery 动画卷页 返回顶部 动画特效(兼容Chrome)
2010/02/15 Javascript
编写Js代码要注意的几条规则
2010/09/10 Javascript
jquery对象和javascript对象即DOM对象相互转换
2014/08/07 Javascript
node.js中的fs.realpath方法使用说明
2014/12/16 Javascript
js 自带的sort() 方法全面了解
2016/08/16 Javascript
JavaScript中捕获与冒泡详解及实例
2017/02/03 Javascript
Angular2关于@angular/cli默认端口号配置的问题
2017/07/15 Javascript
JavaScript实现删除数组重复元素的5种常用高效算法总结
2018/01/18 Javascript
在vue项目中 实现定义全局变量 全局函数操作
2020/10/26 Javascript
[01:28]一分钟告诉你DOTA2 TI9不朽宝藏Ⅱ中有什么!
2019/07/09 DOTA
[41:12]Liquid vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.24
2019/09/10 DOTA
python 控制语句
2011/11/03 Python
python 中字典嵌套列表的方法
2018/07/03 Python
Pycharm之快速定位到某行快捷键的方法
2019/01/20 Python
pyqt5 实现在别的窗口弹出进度条
2019/06/18 Python
python中PS 图像调整算法原理之亮度调整
2019/06/28 Python
在PyCharm中控制台输出日志分层级分颜色显示的方法
2019/07/11 Python
完美解决pycharm导入自己写的py文件爆红问题
2020/02/12 Python
CSS3中box-shadow的用法介绍
2015/07/15 HTML / CSS
websocket+sockjs+stompjs详解及实例代码
2018/11/30 HTML / CSS
MSC邮轮官方网站:加勒比海、地中海和世界各地的假期
2018/08/27 全球购物
爱尔兰最大的体育零售商:Life Style Sports
2019/06/12 全球购物
社区学雷锋活动策划方案
2014/01/30 职场文书
主管竞聘书范文
2014/03/31 职场文书
《西门豹》教学反思
2016/02/23 职场文书
python字符串的多行输出的实例详解
2021/06/08 Python