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,js)
Dec 12 HTML / CSS
你正在寻找的CSS3 动画技术
Jul 27 HTML / CSS
一款纯css3实现简单的checkbox复选框和radio单选框
Nov 05 HTML / CSS
CSS3中HSL和HSLA的简单使用示例
Jul 14 HTML / CSS
CSS3 3D旋转rotate效果实例介绍
May 03 HTML / CSS
HTML5边玩边学(2)基础绘图实现方法
Sep 21 HTML / CSS
基于IE10/HTML5 开发
Apr 22 HTML / CSS
HTML5计时器小例子
Oct 15 HTML / CSS
Html5百叶窗效果的示例代码
Dec 11 HTML / CSS
基于Html5实现的语音搜索功能
May 13 HTML / CSS
浅析图片上传及canvas压缩的流程
Jun 10 HTML / CSS
ivx平台开发之不用代码实现一个九宫格抽奖功能
Jan 27 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
PHP+DBM的同学录程序(1)
2006/10/09 PHP
解决控件遮挡问题:关于有窗口元素和无窗口元素
2007/01/28 PHP
php的一个登录的类 [推荐]
2007/03/16 PHP
php下实现折线图效果的代码
2007/04/28 PHP
php函数实现判断是否移动端访问
2015/03/03 PHP
PHP编程获取各个时间段具体时间的方法
2017/05/26 PHP
用javascript实现分割提取页面所需内容
2007/05/09 Javascript
this和执行上下文实现代码
2010/07/01 Javascript
js运动框架_包括图片的淡入淡出效果
2013/05/11 Javascript
jQuery中siblings()方法用法实例
2015/01/08 Javascript
JavaScript中return false的用法
2015/03/12 Javascript
javascript检测两个数组是否相似
2015/05/19 Javascript
javascript动画之磁性吸附效果篇
2016/12/09 Javascript
基于jQuery封装的分页组件
2017/06/26 jQuery
Hexo已经看腻了,来手把手教你使用VuePress搭建个人博客
2018/04/26 Javascript
JavaScript实现的DOM树遍历方法详解【二叉DOM树、多叉DOM树】
2018/05/07 Javascript
jQuery实现高级检索功能
2019/05/28 jQuery
5个你不知道的JavaScript字符串处理库(小结)
2020/06/01 Javascript
[04:48]DOTA2亚洲邀请赛林书豪为VGJ加油
2017/04/01 DOTA
Python closure闭包解释及其注意点详解
2019/08/28 Python
python 实现turtle画图并导出图片格式的文件
2019/12/07 Python
Python转换itertools.chain对象为数组的方法
2020/02/07 Python
基于python计算并显示日间、星期客流高峰
2020/05/07 Python
Django 实现图片上传和下载功能
2020/12/31 Python
Agoda香港:全球特价酒店预订
2017/05/07 全球购物
家庭睡衣和家庭用品:Little Blue House
2018/03/18 全球购物
印尼网上商店:Alfacart.com
2019/03/11 全球购物
个人实用简单的自我评价
2013/10/19 职场文书
社区十八大感言
2014/01/19 职场文书
运动会稿件50字
2014/02/17 职场文书
传播学专业毕业生自荐书
2014/07/01 职场文书
我的中国梦演讲稿小学篇
2014/08/19 职场文书
九年级语文教学反思
2016/03/03 职场文书
导游词之徐州云龙湖
2019/11/19 职场文书
如何解决goland,idea全局搜索快捷键失效问题
2022/04/03 Golang
Linux中文件的基本属性介绍
2022/06/01 Servers