js实现走马灯效果

走马灯效果通常用于显示滚动文本，常见于新闻标题滚动或通知等。以下是一个使用JavaScript实现走马灯效果的基本示例：

HTML部分：

html<div id="marquee">
<p>这是一段走马灯文字。</p>
</div>

CSS部分：

css#marquee {
width: 100%;
overflow: hidden;
white-space: nowrap;
}

#marquee p {
display: inline-block;
padding-right: 100%; /* 使得文字可以向右滚动 */
animation: marquee linear infinite;
}

JavaScript部分：

javascript@keyframes Marquee {
0% { transform: translateX(0); }
100% { transform: translateX(-100%); }
}

这个例子中，我们使用了CSS的@keyframes规则来定义一个动画，然后将其应用到HTML元素上。这个动画将元素的transform属性从translateX(0)（即元素在原位置）改变到translateX(-100%)（即元素向右移动到其容器的左侧）。因此，文本会不断向右滚动。