时间：2023-06-23 15:30:01 | 来源：网站运营
时间：2023-06-23 15:30:01 来源：网站运营
如何开发一个自己的弹幕库：
在线咨询
// 设置容器样式container.style.setProperty('--playState', 暂停 || 播放)// 弹幕样式.barrage { animation: xxx; animation-play-state: var(--playState);}但是注意每次暂停和播放的时候得记录下来当前的时间用以计算每个弹幕的运动时长，要不后面的弹幕就会发生碰撞// 我们封装的 Vue 弹幕组件<Barrage> <template #default='data'> <div>自定义弹幕：{{ data }}</div> </template></Barrage>// 在弹幕组件中// 拿到插槽的内容, data 是用户传入的数据const slots = this.$scopedSlots.default(data)// 拿到一个 Vue 子类const BarrageVNode = vue.extend({ render(h) { return h('div', slots) }})// 拿到对应的 vmconst barrageInstance = new BarrageVNode().$mount()// 追加到容器中container.append(barrageDom.$el)这样不论用户想搞成什么样子都可以了。.container { position: relative; border: 1px solid; width: 600px; height: 600px;}.masked { position: absolute; z-index: 2; width: 100%; height: 100%; -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKIHdpZHRoPSIyOTUuNDg4ODYyODM3MDQ1N3B4IiBoZWlnaHQ9IjUyMnB4IiB2aWV3Qm94PSIwIDAgMTgwLjAwMDAwMCAzMjAuMDAwMDAwIgogcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQgbWVldCI+CjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAuMDAwMDAwLDMyMC4wMDAwMDApIHNjYWxlKDAuMTAwMDAwLC0wLjEwMDAwMCkiCmZpbGw9IiMwMDAwMDAiIHN0cm9rZT0ibm9uZSI+CjxwYXRoIGQ9Ik0wIDE2MDUgbDAgLTE1OTUgMjQxIDAgMjQxIDAgLTcgMTEzIGMtMyA2MSAtMTEgMTQxIC0xOCAxNzYgLTE0IDc3IDYgMjE0IDUyCjM1NiA2MCAxODIgNjIgMTk0IDY2IDMzOCA1IDEzMyAtNiAyNDcgLTI0IDI0NyAtOSAwIC00MSAtNTUgLTQxIC03MSAwIC0yNQotNTQgLTgyIC05NiAtMTAxIC02MyAtMjcgLTg4IC0xMyAtMTI3IDc1IC0zMCA2OCAtMzAgNjkgLTE4IDE1MCAyMCAxMjkgNTgKMjY4IDg4IDMyMyAzNiA2NSA5OCAxMjAgMTYwIDE0MiA0NyAxNyA3NyAzMyAxNzYgOTUgNjQgNDEgNzcgODUgNTAgMTcyIC0xMwo0NCAtMTggOTEgLTE4IDE3NSAwIDEwNSAzIDEyMCAyOCAxNzIgMzIgNjQgNzIgOTkgMTM4IDExNyA0MiAxMiA1MCAxMSA5NCAtMTEKNDQgLTIxIDUwIC0yOSA3MiAtODggMjQgLTYzIDQ5IC0xNTIgNTkgLTIxNSA0IC0yMiAtMiAtNDIgLTI0IC03NSAtNjQgLTk2Ci00OCAtMTgyIDQzIC0yMzIgNzggLTQyIDE4OCAtOTUgMjEyIC0xMDIgMzggLTEyIDkyIC04OSAxMDggLTE1OCA5IC0zNSAyNwotOTkgNDAgLTE0MyAxMyAtNDQgMzggLTE0NyA1NSAtMjMwIDE2IC04MiAzNSAtMTcyIDQwIC0xOTggMTEgLTU1IDEzIC0xMTUgNAotMTcwIC02IC0zMiAtMTAgLTM3IC0zMyAtMzcgLTI4IDAgLTYxIC0zMCAtNjEgLTU1IDAgLTkgMTcgLTIwIDQ1IC0yNyA0OSAtMTMKNTAgLTE1IDMzIC03MyAtNiAtMjIgLTExIC00MyAtMTAgLTQ3IDMgLTEzIC0yNiAzIC0zMiAxOCAtNCAxMCAtMTQgMTIgLTMwIDgKLTMzIC04IC00MCAxNiAtMzkgMTM0IDEgMTA5IC0xNSAxNzMgLTQ0IDE4NiAtMjQgMTEgLTU3IDc5IC03MyAxNTAgLTIwIDkwCi00MyAxMTEgLTU1IDQ5IC01IC0yNiAtOSAtMzMgLTE1IC0yMyAtMTYgMjcgLTIwIC0xMCAtMTYgLTE1MCAzIC0xMTggOCAtMTQ4CjM2IC0yMzUgMzcgLTExNCA3MSAtMjQxIDkyIC0zMzUgMTIgLTUzIDE5IC02NyA0MSAtNzggMTYgLTggMjcgLTIxIDI3IC0zMyAwCi0xMSA3IC0yMiAxNSAtMjUgMTggLTcgMTkgLTUxIDIgLTExNyBsLTEyIC00OCAtMzkgNDcgYy0zOCA0NSAtMzkgNDYgLTU4IDI3Ci0xNSAtMTUgLTIwIC0zNyAtMjIgLTEwNiBsLTQgLTg3IDIyOSAwIDIyOSAwIDAgMTU5NSAwIDE1OTUgLTkwMCAwIC05MDAgMCAwCi0xNTk1eiIvPgo8L2c+Cjwvc3ZnPgo=");}.val { position: absolute; left: 20px; top: 130px;}<div class="container"> <div class="masked"> <div class="val">我是内容我是内容我是内容我是内容</div> </div></div>关键词：
