如何使用CSS或Javascript创建无限显示的字幕 [英] How to create a marquee that appears infinite using CSS or Javascript
问题描述
我需要创建两个跨浏览器窗口的选取框（一个带有重复的图像，另一个带有重复的链接），无论大小如何。选取框项目需要首先显示在屏幕左侧，并且无需花费几秒钟的时间就可以显示出来。每个像素之间的间距大约为20px / 30px。选取框需要显示为无限。也就是说，项目需要始终填充窗口的整个宽度。字幕需要在悬停时暂停。
I need to create two marquees (one with a repeating image and one with repeating links) that span the browser window, whatever size that may be; the marquee items need to be initially displayed at the left side of the screen and not take a few seconds to travel across to appear. Each of them need to be about 20px/30px apart. The marquee needs to appear infinite; that is, items need to fill up the entire width of the window at all times. The marquee needs to pause on hover.
我已经明确了我想要使用CSS的基本知识。借助此响应 https://stackoverflow.com/a/56524853/11623961 ，我能够获得我一直在寻找悬停的地方。
I've carved out the basics of what I'm essentially looking to do using CSS. With the help of this response https://stackoverflow.com/a/56524853/11623961, I was able to get the pause on hover I was looking for.
不幸的是，我仍然不确定如何使动画看起来没有间隙，好像有无数的单词从右向左移动。我正在尝试实现类似于本网站顶部的字幕 https：//www.at- elier.org/ ，但如果可能的话，使用CSS或必要时使用最小的Javascript。
Unfortunately, I'm still left unsure of how to make the animation appear without gaps and as if there's an infinite amount of words traveling from the right to the left. I'm trying to achieve a marquee like the one at the top of this site https://www.at-elier.org/, but with CSS, if possible or minimal Javascript, if necessary.
body {
margin: 0;
font-family: "UniversLTPro-Ex";
font-size: 30px;
}
a {
text-decoration: none;
color: #000;
}
.marquee {
height: 35px;
width: 100%;
overflow: hidden;
position: relative;
background-color: #e9e5fb;
border-top: 1px solid black;
border-bottom: 1px solid black;
padding: 8px 0 4px 0;
}
.marquee div {
display: inline-block;
width: 300%;
height: 40px;
position: absolute;
overflow: hidden;
animation: marquee 30s linear infinite;
}
.marquee span {
float: left;
width: 1100px;
}
.marquee:hover div {
animation-play-state: paused;
}
@keyframes marquee {
0% { left: 0%; }
100% { left: -1100px; }
}
/* @import must be at top of file, otherwise CSS will not work */
@import url("//hello.myfonts.net/count/3909a7");
@font-face {font-family: 'UniversLTPro-Ex';src: url('webfonts/3909A7_0_0.eot');src: url('webfonts/3909A7_0_0.eot?#iefix') format('embedded-opentype'),url('webfonts/3909A7_0_0.woff2') format('woff2'),url('webfonts/3909A7_0_0.woff') format('woff'),url('webfonts/3909A7_0_0.ttf') format('truetype');}
<div class="marquee">
<div>
<span><a href="#">twitter</a>
<a href="#">instagram</a>
<a href="#">pinterest</a>
<a href="#">spotify</a>
<a href="#">magazine</a> </span>
<span><a href="#">twitter</a>
<a href="#">instagram</a>
<a href="#">pinterest</a>
<a href="#">spotify</a>
<a href="#">magazine</a> </span>
</div>
</div>
推荐答案
您是如此亲密。希望下面的演示是可以自我解释的，但是，基本上，您需要以字幕框宽度的-100％开始关键帧，然后以100％结尾，因此在重新启动之前它不在屏幕上。
You are so close. Hopefully the demo below is self explainable but, basically you need to start your key frames at -100% your marquee's width then end at 100% so it's off screen before it restarts.
希望这会有所帮助！
[edit]添加连续滚动
[edit] added continuous scrolling
body {
margin: 0;
font-family: "UniversLTPro-Ex";
font-size: 30px;
}
a {
text-decoration: none;
color: #000;
}
.marquee {
height: 35px;
width: 100%;
overflow: hidden;
position: relative;
background-color: #e9e5fb;
border-top: 1px solid black;
border-bottom: 1px solid black;
padding: 8px 0 4px 0;
}
/* would need to be adjusted depending on time */
.marquee .marqueeone{
animation: marquee 10s linear infinite
}
.marquee .marqueetwo{
animation: marquee 10s linear 2.5s infinite
}
.marquee .marqueethree{
animation: marquee 10s linear 5s infinite
}
.marquee .marqueefour{
animation: marquee 10s linear 7.5s infinite
}
/* even out the elements */
.marquee div {
position: absolute;
width: 100%;
left: 100%;
height: 40px;
display: flex;
justify-content: space-between;
}
.marquee:hover div {
animation-play-state: paused;
}
/* add delay at the end of animation so you dont start while another div is going */
@keyframes marquee {
0% { left: 100%; }
50% { left: -100%; }
100% {left: -100%}
}
/* @import must be at top of file, otherwise CSS will not work */
@import url("//hello.myfonts.net/count/3909a7");
@font-face {font-family: 'UniversLTPro-Ex';src: url('webfonts/3909A7_0_0.eot');src: url('webfonts/3909A7_0_0.eot?#iefix') format('embedded-opentype'),url('webfonts/3909A7_0_0.woff2') format('woff2'),url('webfonts/3909A7_0_0.woff') format('woff'),url('webfonts/3909A7_0_0.ttf') format('truetype');}
<div class="marquee">
<div class="marqueeone"><a href="#">twitter</a>
<a href="#">instagram</a>
<a href="#">pinterest</a>
<a href="#">spotify</a>
<a href="#">magazine</a>
</div>
<div class="marqueetwo"><a href="#">twitter</a>
<a href="#">instagram</a>
<a href="#">pinterest</a>
<a href="#">spotify</a>
<a href="#">magazine</a> </div>
<div class="marqueethree"><a href="#">twitter</a>
<a href="#">instagram</a>
<a href="#">pinterest</a>
<a href="#">spotify</a>
<a href="#">magazine</a> </div>
<div class="marqueefour"><a href="#">twitter</a>
<a href="#">instagram</a>
<a href="#">pinterest</a>
<a href="#">spotify</a>
<a href="#">magazine</a>
</div>
</div>
这篇关于如何使用CSS或Javascript创建无限显示的字幕的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
