如何使用CSS或Javascript创建字幕

我需要创建两个框（一个带有重复图像，另一个带有重复链接），跨越任意大小的浏览器窗口；字幕项目需要从一开始就显示出来，不需要几秒钟就可以出现在屏幕上，并且每个项目之间的间隔大约为20px/30px。当用户将鼠标悬停在屏幕上时，字幕需要停止在页面上移动

我正在为一个客户创建一个网站，在一个页面上，我们决定用一个字幕显示徽标，在另一个页面上，用字幕显示客户社交媒体的链接。我不确定如何根据文本或图像的大小来计算动画的必要持续时间，使其看起来无限长。我已经研究并尝试了CSS选项，我四处询问，结果发现Javascript通常被推荐使用。我刚刚开始深入研究Javascript，所以我对这个项目从何处开始一无所知。这实际上与我需要的非常相似：。这是我试图实现的一个例子：（只有底部的一个，但左侧没有重叠；只是从左向右移动）。这就是我试图使用的，以达到预期的效果：

body{
保证金：0；
字体系列：“UniversLTPro Ex”；
字体大小：30px；
}
a{
文字装饰：无；
颜色：#000；
}
马奎尔先生{
高度：35px；
宽度：100%；
溢出：隐藏；
位置：相对位置；
背景色：#e9e5fb；
边框顶部：1件纯黑；
边框底部：1px纯黑；
填充：8px 0 4px 0；
}
.字幕组{
显示：内联块；
宽度：300%；
高度：40px；
位置：绝对位置；
溢出：隐藏；
动画：字幕12s线性无限；
}
.帐篷跨度{
浮动：左；
宽度：25%；
}
@关键帧选框{
0%{左：0；}
100%{左：-150%；}
}

---

使用CSS始终是最好的选择，但根据您的要求，它需要暂停悬停并从上次停止的位置恢复，而使用CSS是不可能的。 因此，请使用Javascript来移动So。设置一个时间间隔，该时间间隔将更改元素的left属性，以按时间间隔向左移动元素，并使用onhover清除时间间隔，以便动画将在最后一个left值处停止。onmouseout再次启动将继续动画的间隔

幸运的是，你的问题已经解决了，如果你想得到更多，你应该付出更多的努力

body{
保证金：0；
字体系列：“UniversLTPro Ex”；
字体大小：30px；
}
a{
文字装饰：无；
颜色：#000；
}
马奎尔先生{
高度：35px；
宽度：300%；
位置：相对位置；
填充：8px 0 4px 0；
边界：无；
}
马尔克先生{
背景色：#e9e5fb；
边框顶部：1件纯黑；
边框底部：1px纯黑；
}
.帐篷跨度{
浮动：左；
宽度：300px；
}
@关键帧选框{
0%{左：0；}
100%{左：-150%；}
}

---

这里有几种方法可以达到效果，你可以选择你最喜欢的方法

• HTML字幕标记
• CSS动画和文本缩进
• CSS动画和相对位置
• JS香草（无LIB）
• JS Jquery动画

/*香草JS*/
var rightJS={
init:function（）{
rightJS.Tags=document.querySelectorAll（'.rightJS'）；
对于（var i=0；iW）x=-W；
如果（rightJS.Tags[i].parentElement.parentElement.querySelector（':hover'）！==rightJS.Tags[i].parentElement）rightJS.Tags[i].style.right=x+'px'；
} 
requestAnimationFrame（this.loop.bind（this））；
}
};
window.addEventListener（'load'，rightJS.init）；
/*JQUERY*/
$（函数（）{
var rightJQ={
init:function（）{
$（'.rightJQ'）.css({
溢出：“隐藏”
});
$（'.rightJQ'）.on（'mouseover'，function（）{
$（'div'，this.stop（）；
});
$（'.rightJQ'）。on（'mouseout'，function（）{
$（'div'，这个）。设置动画({
对：“100%”
}，14000，‘线性’；
});
rightJQ.loop（）；
},
循环：函数（）{
$（'.rightJQ div'）.css({
位置：'相对'，
右：“-100%”
}).制作动画({
对：“100%”
}，14000，“线性”，右jq.环）；
}
};
rightJQ.init（）；
});
marquee{background:#0089fa；}
.rightTI{背景：#ff002b；
空白：nowrap；
溢出：隐藏；
动画：字幕18s线性无限；
}
.rightTI:悬停{
动画播放状态：暂停；
}
@-webkit关键帧选取框{
0%{文本缩进：100%；}
100%{文本缩进：-100%；}
}
.rightCSS{
背景：#a35dc1；
溢出：隐藏；
} 
.右CSS分区{
位置：相对位置；
动画：CSSright线性18s无限；
} 
@关键帧CSSright{
0%{右：-100%}
100%{对：100%}
}
.rightCSS:悬停div{
动画播放状态：暂停；
}
.rightJS{背景：#ffa900；}
.rightJQ{背景：#00a753；}
李先生{
浮动：左；
宽度：80%；
填充：1%；
利润率：1%10%；
高度：20px；
边界半径：0.5em；
盒影：0.1em 0.5em；
}

★ HTML标记框★
★ CSS动画和文本缩进★
★ CSS动画和位置关系