使用css3怎么实现一个蒙版弹幕功能-创新互联

今天就跟大家聊聊有关使用css3怎么实现一个蒙版弹幕功能，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。

在新宾等地区，都构建了全面的区域性战略布局，加强发展的系统性、市场前瞻性、产品创新能力，以专注、极致的服务理念，为客户提供成都网站设计、网站制作网站设计制作按需制作,公司网站建设,企业网站建设,品牌网站建设,成都全网营销推广,成都外贸网站建设公司,新宾网站建设费用合理。

css是什么意思

css是一种用来表现HTML或XML等文件样式的计算机语言，主要是用来设计网页的样式，使网页更加美化。它也是一种定义样式结构如字体、颜色、位置等的语言，并且css样式可以直接存储于HTML网页或者单独的样式单文件中，而样式规则的优先级由css根据这个层次结构决定，从而实现级联效果，发展至今，css不仅能装饰网页，也可以配合各种脚本对于网页进行格式化。

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部分：

.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); } to{ left:0; transform:translateX(-100%); } } .block{ position:absolute; top: 50%; left: 100%; width: 100%; color: #fff; }

// 生成一个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怎么实现一个蒙版弹幕功能-创新互联

css是什么意思

其他资讯