使用CSS实现文字跑马灯效果

<div class="marquee">
  <span>这里是需要滚动的文本</span>
</div>
<style>
.marquee {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
}

.marquee span {
    display: inline-block;
    animation: marquee 10s linear infinite;
}

@keyframes marquee {
    from { transform: translateX(100%); }
    to { transform: translateX(-100%); }
}
</style>

在这个示例中，将包含文本的 div 元素设置为 display: inline-block ，使其仅占用所需宽度。使用 white-space: nowrap 和 overflow: hidden 属性确保文本不会换行或溢出。

然后，使用CSS动画和关键帧来定义滚动效果。使用 translateX() 函数将文本平移，从而创建滚动效果。调整 animation 属性值中的时间以更改滚动速度，并修改 from 和 to 关键帧的位置来改变滚动方向。