广州凡科互联网科技有限公司

营业时间
MON-SAT 9:00-18:00

全国服务热线
18720358503

公司门店地址
广州市海珠区工业大道北67号凤凰创意园

css3完成蒙版视频弹幕作用,

日期:2021-02-19 浏览:
css3完成蒙版视频弹幕作用,
关注度3 评价 39  网民共享于:  :54 访问数2349次

css3完成蒙版视频弹幕作用,

近期在b站在见到一种视频弹幕实际效果称为智能化防挡视频弹幕,也便是传说故事中的蒙版视频弹幕, 开启以后实际效果大约是那样的

从此无需担忧男神女王的绝代容貌被花哨的视频弹幕遮挡啦,不是是觉得很奇异。

完成基本原理实际上便是相近于ps的蒙版,换句话说将图象的一一部分 掩藏 。这儿大家必须采用的是css3的mask蒙版特性。

CSS mask

CSS mask蒙版特性的历史时间十分悠久了,远到比CSS3 border-radius等特性也要悠久,最开始是出現在Safari访问器上的,类似能够追朔到09年。可是哪个情况下還是ie的天地,考虑到到适配性,全部沒有被营销推广起來。但是如今,ie早已是以往式了,因此能够安心应用了。

应用起來也较为简易

img src= ps1.jpg >

css编码以下:
 

.mask-image {
 width: 250px;
 height: 187.5px;
 -webkit-mask-image: url(mask.png);
 mask-image: url(mask.png);
}

蒙板能够是 CSS3 渐变色或是半全透明的PNG照片,蒙板原素的alpha数值0的情况下会遮盖下边的原素,为1的情况下会彻底显示信息下边的內容。实际效果大约是那样:

有关mask的大量特性及主要参数这儿也不逐一科学研究了,实际能看本文:wordpress/2017/11/css-css3-mask-masks/

好啦,拥有这一特性大家便可以开心的完成蒙版视频弹幕了

最先,必须一张底图,仿真模拟为视頻的某一帧的照片

随后大家必须一个蒙版,遮挡住情况中的角色

显示信息编码以下:

html一部分:

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

首先看下实际效果:

行吧,甚么也看不出来来。但是具体上角色早已再加了蒙版

天赋加点视频弹幕试一下实际效果。

加上视频弹幕动漫实际效果和款式

@keyframes barrage{
 from{
 left:100%;
 transform:translateX(0);
 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完成蒙版视频弹幕作用,期待对大伙儿有一定的协助,假如大伙儿有一切疑惑热烈欢迎帮我留言板留言,网编会立即回应大伙儿的!


dengb.TechArticlecss3完成蒙版视频弹幕作用, 近期在b站在见到一种视频弹幕实际效果称为智能化防挡视频弹幕,也便是传说故事中的蒙版视频弹幕, 开启以后实际效果大约是那样的 从此不...



网站知识

联系方式丨CONTACT

  • 全国热线:18720358503
  • 传真热线:18720358503
  • Q Q咨询:2639601583
  • 企业邮箱:2639601583@qq.com

首页
电话
短信
联系