如何使用Javascript无限滚动水平文本？
我想在一个框中水平滚动歌曲的标题。我重复了歌曲的标题，并隐藏了溢出的内容，因此它给人一种无限卷轴的错觉，但结果真的很不稳定 这就像是在汽车仪表板上，如果该区域无法容纳整个文本，歌曲标题/艺术家就会循环如何使用Javascript无限滚动水平文本？,javascript,html,css,text,scroll,Javascript,Html,Css,Text,Scroll,我想在一个框中水平滚动歌曲的标题。我重复了歌曲的标题，并隐藏了溢出的内容，因此它给人一种无限卷轴的错觉，但结果真的很不稳定 这就像是在汽车仪表板上，如果该区域无法容纳整个文本，歌曲标题/艺术家就会循环 [Codepen](https://codepen.io/safiajeff/pen/MWJQOPv) 我怎样才能使它更平滑/无限？html标记就可以做到这一点 这是文件： 编辑：对于那些抱怨不赞成的人，然后在CSS中实现它。 到目前为止，唯一放弃对marquee支持的是firefox，而现在
[Codepen](https://codepen.io/safiajeff/pen/MWJQOPv)
<html>
<body>
<style style="text/css">
.marquee {
height: 50px;
overflow: hidden;
position: relative;
background: #fefefe;
color: #333;
border: 1px solid #4a4a4a;
}
.marquee p {
position: absolute;
width: 100%;
height: 100%;
margin: 0;
line-height: 50px;
text-align: center;
-moz-transform: translateX(100%);
-webkit-transform: translateX(100%);
transform: translateX(100%);
-moz-animation: scroll-left 2s linear infinite;
-webkit-animation: scroll-left 2s linear infinite;
animation: scroll-left 20s linear infinite;
}
@-moz-keyframes scroll-left {
0% {
-moz-transform: translateX(100%);
}
100% {
-moz-transform: translateX(-100%);
}
}
@-webkit-keyframes scroll-left {
0% {
-webkit-transform: translateX(100%);
}
100% {
-webkit-transform: translateX(-100%);
}
}
@keyframes scroll-left {
0% {
-moz-transform: translateX(100%);
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
100% {
-moz-transform: translateX(-100%);
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
}
</style>
<div class="marquee">
<p> Marquee in CSS </p>
</div>
</body>
</html>
马奎尔先生{
高度：50px；
溢出：隐藏；
位置：相对位置；
背景：#fefefe；
颜色：#333；
边框：1px实心#4a4a4a；
}
.marquee p{
位置：绝对位置；
宽度：100%；
身高：100%；
保证金：0；
线高：50px；
文本对齐：居中；
-moz变换：translateX（100%）；
-webkit转换：translateX（100%）；
转化：translateX（100%）；
-moz动画：向左滚动2s线性无限；
-webkit动画：向左滚动2s线性无限；
动画：向左滚动20秒线性无限；
}
@-moz关键帧向左滚动{
0% {
-moz变换：translateX（100%）；
}
100% {
-moz变换：translateX（-100%）；
}
}
@-webkit关键帧向左滚动{
0% {
-webkit转换：translateX（100%）；
}
100% {
-webkit转换：translateX（-100%）；
}
}
@关键帧向左滚动{
0% {
-moz变换：translateX（100%）；
-webkit转换：translateX（100%）；
转化：translateX（100%）；
}
100% {
-moz变换：translateX（-100%）；
-webkit转换：translateX（-100%）；
转化：translateX（-100%）；
}
}
CSS中的字幕
如果您已经有两份标题副本，您可以使用CSS而不是JS来滚动 这两个标题在同一行上一个接一个。如果将其容器向左变换50%，则第二个版本将位于左侧：0。然后，第一个版本立即转到同一个地方，你看不到任何抖动 这不仅相当简单，只是添加了CSS关键帧定义，没有JS，而且CPU和GPU的使用量都比较轻，从而节省了用户的电池
部分{
溢出：隐藏；
宽度：150px；
显示：内联块；
边框：1px纯红；
高度：50px；
空白：nowrap；
}
div{
宽度：566px；
显示器：flex；
柔性包装：nowrap；
动画：移动2s无限线性；/*当然，将时间设置为您想要的时间*/
}
@关键帧移动{
到{
转化：translateX（-50%）；
}
}
h1{
字体大小：20px；
保证金：0；
左侧填充：0px；
边框：1px纯蓝色；
宽度：283px；
}
西蒙·多米尼克-晚上
西蒙·多米尼克-晚上