vue 文字跑马灯

<template><div class="marquee-container"><div class="marquee-content"><div>{{ marqueeText }}</div><div>{{ marqueeText }}</div> <!-- 复制一份文本，用于无缝衔接 --></div></div>
</template>

<style>
@keyframes marquee {0% {transform: translateX(0);}100% {transform: translateX(-50%); /* 移动到一半的位置 */}
}.marquee-container {width: 100%;overflow: hidden;
}.marquee-content {white-space: nowrap;display: inline-block;animation: marquee 20s linear infinite;
}
</style>

在这个示例中，我们复制了一份文本，并将其放在原始文本的后面，以实现无缝衔接的效果。使用animation: marquee 20s linear infinite;，从而实现20s匀速循环滚动。