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实现任意图片lowpoly动画效果实例
May 11 HTML / CSS
CSS3教程(5):网页背景图片
Apr 02 HTML / CSS
CSS3之多背景background使用示例
Oct 18 HTML / CSS
利用css3实现的简单的鼠标悬停按钮
Nov 04 HTML / CSS
css3实现冲击波效果的示例代码
Jan 11 HTML / CSS
从一次项目重构说起CSS3自定义变量在项目的使用方法
Mar 01 HTML / CSS
HTML5之WebGL 3D概述(上)—WebGL原生开发开启网页3D渲染新时代
Jan 31 HTML / CSS
HTML5+JS实现俄罗斯方块原理及具体步骤
Nov 29 HTML / CSS
详解移动端HTML5页面端去掉input输入框的白色背景和边框(兼容Android和ios)
Dec 15 HTML / CSS
html5唤醒APP小记
Mar 27 HTML / CSS
鼠标滚轮事件和Mac触控板双指事件
Dec 23 HTML / CSS
HTML5之高度塌陷问题的解决
Jun 01 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
博士208HAF收音机实习报告
2021/03/02 无线电
建立文件交换功能的脚本(一)
2006/10/09 PHP
php去除头尾空格的2种方法
2015/03/16 PHP
wamp服务器访问php非常缓慢的解决过程
2015/07/01 PHP
php判断手机浏览还是web浏览,并执行相应的动作简单实例
2016/07/28 PHP
thinkPHP框架实现的简单计算器示例
2018/12/07 PHP
在laravel5.2中实现点击用户头像更改头像的方法
2019/10/14 PHP
Avengerls vs KG BO3 第三场2.18
2021/03/10 DOTA
JavaScript 克隆数组最简单的方法
2009/02/12 Javascript
js 兼容多浏览器的回车和鼠标焦点事件代码(IE6/7/8,firefox,chrome)
2010/04/14 Javascript
jCallout 轻松实现气泡提示功能
2013/09/22 Javascript
基于NodeJS的前后端分离的思考与实践(四)安全问题解决方案
2014/09/26 NodeJs
关于微信中a链接无法跳转问题
2016/08/02 Javascript
AngularJS  $modal弹出框实例代码
2016/08/24 Javascript
layui递归实现动态左侧菜单
2019/07/26 Javascript
jQuery操作动画完整实例分析
2020/01/10 jQuery
[01:46]2020完美世界全国高校联赛秋季赛报名开启
2020/10/15 DOTA
Python下实现的RSA加密/解密及签名/验证功能示例
2017/07/17 Python
解决pytorch GPU 计算过程中出现内存耗尽的问题
2019/08/19 Python
解决python多行注释引发缩进错误的问题
2019/08/23 Python
python函数声明和调用定义及原理详解
2019/12/02 Python
python使用建议与技巧分享(二)
2020/08/17 Python
一款恶搞头像特效的制作过程 利用css3和jquery
2014/11/21 HTML / CSS
html5 桌面提醒:Notifycations应用介绍
2012/11/27 HTML / CSS
美国生日蛋糕店:Bake Me A Wish!
2017/02/08 全球购物
对于没有初始化的变量的初始值可以作怎样的假定
2014/10/12 面试题
Ajax的工作原理
2015/12/04 面试题
人力资源管理专业毕业生推荐信
2013/11/07 职场文书
2014年高三毕业生自我评价
2014/01/11 职场文书
董事长助理岗位职责
2014/02/18 职场文书
毕业生学校推荐信范文
2014/05/21 职场文书
学位证书委托书
2014/09/30 职场文书
2014年敬老院工作总结
2014/12/08 职场文书
证婚人致辞精选
2015/07/28 职场文书
上帝为你开了一扇窗之Tkinter常用函数详解
2021/06/02 Python
Rust 连接 PostgreSQL 数据库的详细过程
2022/01/22 PostgreSQL