1.barrage.less
html,body{ width:100%; } .cute-barrage{ width: 100%; height: 100px; /*确定弹幕长度*/ position: absolute; top: 1.5rem; /*确定弹幕高度*/ left: 0; overflow-y: hidden; /*横向超出部分隐藏*/ .barrage-div{ position: absolute; left: 0; bottom: 0; /*保证一开始在界面外侧，从右向左就是right，从左向右就是left*/ height: 0.6rem; background-color: rgba(255, 255, 255, 0.9); border-radius: 2rem; white-space: nowrap; /*确保内容在一行显示，不然移动到最后会折行*/ img{ width: 0.5rem; height: 0.5rem; vertical-align: middle; //内联块元素，居中对齐 padding-left: 0.05rem; border-radius: 50%; } span{ font-size: 14px; padding: 0 0.1rem; line-height: 0.6rem; //内联块元素，居中对齐四个缺一不可 height: 0.6rem; //内联块元素，居中对齐四个缺一不可 display: inline-block; //内联块元素，居中对齐四个缺一不可 vertical-align: middle; //内联块元素，居中对齐四个缺一不可 i{ color: #fe5453; font-weight: 700; } } } }2.barrage.vue
<style lang="less" src="./barrage.less"></style> <template> <div class="barrage"> <div class="cute-barrage"> <div class="barrage-div"> <img src="http://kw1-1253445850.file.myqcloud.com/static/image/stimg_7656dc02eb1cd13adbacbdd2695dc3a8.jpg" /> <span> 么么嗒今天提现 <i>1Q币</i> </span> </div> <div class="barrage-div"> <img src="http://kw1-1253445850.file.myqcloud.com/static/image/stimg_632fecdcb52417cb8ab89fa283e07281.jpg" /> <span> 橘色的大耳朵猫今天提现 <i>5Q币</i> </span> </div> <div class="barrage-div"> <img src="http://kw1-1253445850.file.myqcloud.com/static/image/stimg_632fecdcb52417cb8ab89fa283e07281.jpg" /> <span> 丶鹿锅里面装着吴奶包今天提现 <i>3Q币</i> </span> </div> </div> </div> </template> <script> export default { name: "barrage", components: {}, props: {}, data() { return {}; }, watch: {}, computed: {}, methods: {}, created() {}, mounted() { for ( let i = 0; i < document.getElementsByClassName("barrage-div").length; i++ ) { var height = document.getElementsByClassName("barrage-div")[i].clientHeight; document.getElementsByClassName("barrage-div")[i].style.bottom = -height; // document.getElementsByClassName("barrage-div")[i].style.top = topRandom; //将弹幕移动到屏幕外面，正好超出的位置 //拼写动画帧函数，记得每个ani要进行区分，宽度从自己的负宽度移动一整个屏幕的距离 var keyframes = `\ @keyframes ani${i}{ form{ bottom:${-height}px; } to{ bottom:100px; } }\ @-webkit-keyframes ani${i}{ form{ bottom:${-height}px; } to{ bottom:100px; } }`; // 创建style标签 const style = document.createElement("style"); // 设置style属性 style.type = "text/css"; // 将 keyframes样式写入style内 style.innerHTML = keyframes; // 将style样式存放到head标签 document.getElementsByTagName("head")[0].appendChild(style); //定义动画速度列表 var aniList = [4, 4, 4, 4, 4]; //取数组的随机数，0,1,2,3,4 var aniTime = Math.floor(Math.random() * 5); //给当全前弹幕添加animation的css //延迟的时间用每个的*1.5倍，这个可变 document.getElementsByClassName("barrage-div")[i].style.animation=`ani${i} ${aniList[aniTime]}s linear ${i * 1.5}s` document.getElementsByClassName("barrage-div")[i].style.webkitAnimation=`ani${i} ${aniList[aniTime]}s linear ${i * 1.5}s` } } }; </script>
