<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匀速循环滚动。