element写一个弹幕
时间: 2024-05-25 14:16:05 浏览: 7
<template>
<div class="danmu">
<div class="danmu-item" v-for="(item, index) in danmuList" :key="index" :style="{ top: item.top + 'px', animationDelay: item.delay + 's' }">
{{ item.content }}
</div>
</div>
</template>
<script>
export default {
data() {
return {
danmuList: [],
danmuTimer: null
}
},
mounted() {
this.startDanmu()
},
methods: {
startDanmu() {
// 模拟弹幕数据
const danmuData = [
{ content: '第一条弹幕', top: 50, delay: 0 },
{ content: '第二条弹幕', top: 100, delay: 1 },
{ content: '第三条弹幕', top: 150, delay: 2 },
{ content: '第四条弹幕', top: 200, delay: 3 },
{ content: '第五条弹幕', top: 250, delay: 4 },
]
let i = 0
this.danmuTimer = setInterval(() => {
if (i >= danmuData.length) {
clearInterval(this.danmuTimer)
return
}
this.danmuList.push(danmuData[i])
i++
}, 1000)
}
}
}
</script>
<style scoped>
.danmu {
position: relative;
width: 100%;
height: 300px;
overflow: hidden;
}
.danmu-item {
position: absolute;
left: 100%;
white-space: nowrap;
font-size: 16px;
color: #fff;
text-shadow: 1px 1px 1px #000;
animation: danmuMove 10s linear;
}
@keyframes danmuMove {
from {
left: 100%;
}
to {
left: -100%;
}
}
</style>