样式

代码

<div class="marquee-prompt"><div class="list-prompt" ref='boxPrompt'><span v-for="item in listPrompt" :title="item" class="prompt">{{item}}</span></div>
</div>data() {return {listPrompt: ['xxx', 'xxxx']}
}mounted() {this.moveBoxPrompt()
},methods: {moveBoxPrompt() {let target = this.$refs.boxPromptlet initLeft = 0setInterval(() => {initLeft ++if(initLeft >= target.offsetWidth){initLeft = 0}target.style = 'transform: translateX(-'+ initLeft +'px)'},16)},
}

css

.marquee-prompt {margin-bottom: 10px;width: 100%;overflow: hidden;position: relative;height: 20px;line-height: 20px;
}
.list-prompt {position: absolute;white-space: nowrap;
}
.prompt {font-style: italic;text-decoration: underline;font-size: 14px;color: #1890ff;font-weight: bold;width: 100px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;cursor: pointer;user-select: none;margin-right: 10px;&:hover {color: #68aef8;}&:active{color: #1890ff;}
}