如何制作无限滚动的字幕？我无法重复我的项目

Question

如果这个问题有点初级，我很抱歉，但我现在在 CSS 方面遇到了一些困难。而且我无法将注意力集中在无限滚动的字幕上。我仍然感到非常自信/高兴，因为我能够当场弄清楚如何自己完成其余的样式和排序业务，但我只是在使 .marquee-row-items 重复一次时遇到问题他们离开了父元素。

我知道我可以添加更多的选框行项目，但我只有有限的数量可以使用，我真的想让这种无限滚动没有动画之间任何大的或明显的间隙。但在我的代码中，如果有意义的话，它总是“重新启动”而不是继续。

希望代码片段更容易理解。

我相信这一切都可以用 CSS 来完成，而不用接触 JS...对吗？

我尝试调整父元素和行的宽度。我还查找了一个教程，据说要添加可变间隙，但即使在使用代码笔之后，我认为我还没有理解它。我添加了 --gap 变量。

CSS

.marquee {
    --gap: 1em; 
    display: flex;
    /* align-items: center; */
    flex-direction: column;
    gap:var(--gap);

    margin: 0 auto;
    padding: 1em;
    
    border: 1px solid black;
    background: black;

    overflow: hidden;
    position: relative; /*/ Allows psuedo-elements to position themselves relative to the container /*/
}
.marquee::before,
.marquee::after {
    content: "";
    position: absolute;
    top: 0%;
    left: 0%;
    z-index: 2;

    display: block;
    width: 50%;
    height: 100%;

    opacity: 100%;

    user-select: none;
    pointer-events: none; /*/ Allows us to pause the animation by hover by removing div 'obstruction' /*/
}
.marquee::before { /*/ Adds a fade out/in effect at the both ends of our marquee container /*/
    background: linear-gradient(to right, black, transparent);
}
.marquee::after {
    background: linear-gradient(to left, black, transparent);
}


.marquee__row {
    display: flex;
    flex-direction: row;
    flex-shrink: 0;
    gap: var(--gap);
    justify-content: space-around;

    /* min-width: 100%; */
    animation: marqueeMoveX 10s linear infinite;
    -webkit-animation: marqueeMoveX 10s linear infinite;
}

.marquee__row:hover {
    animation-play-state: paused;
}

.marquee__row:nth-of-type(odd) {
    animation-play-state: reverse;
}

.marquee__row__item {
    display: flex;
    align-items: center;
    padding: 1em;

    font-size: 1em;
    color: white;
}

.marquee__row__item i {
    font-size: 5em;
}

@keyframes marqueeMoveX {
    0% {
        transform: translateX(0);
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
    }

    100% {
        transform: translateX(calc(-100% - var(--gap)));
        -webkit-transform: translateX(calc(-100% - var(--gap)));
        -moz-transform: translateX(calc(-100% - var(--gap)));
        -ms-transform: translateX(calc(-100% - var(--gap)));
        -o-transform: translateX(calc(-100% - var(--gap)));
    }
}

HTML

    <div class="marquee">
                <div class="marquee__row">
                    <div class="marquee__row__item">
                        <i class="fas fa-code"></i> <span> code </span>
                    </div>
                    <div class="marquee__row__item">
                        <i class="fab fa-html5"></i> <span> code </span>
                    </div>
                    <div class="marquee__row__item">
                        <i class="fab fa-css3-alt"></i> <span> code </span>
                    </div>
                    <div class="marquee__row__item">
                        <i class="fab fa-js"></i> <span> code </span>
                    </div>
                    <div class="marquee__row__item">
                        <i class="fas fa-microchip"></i> <span> code </span>
                    </div>
                </div>
                <div class="marquee__row">
                    <div class="marquee__row__item">
                        <i class="fab fa-java"></i> <span> code </span>
                    </div>
                    <div class="marquee__row__item">
                        <i class="fab fa-php"></i> <span> code </span>
                    </div>
                    <div class="marquee__row__item">
                        <i class="fab fa-sass"></i> <span> code </span>
                    </div>
                    <div class="marquee__row__item">
                        <i class="fab fa-react"></i> <span> code </span>
                    </div>
                    <div class="marquee__row__item">
                        <i class="fas fa-bug"></i> <span> code </span>
                    </div>
                </div>
            </div>

Answer 1

这是无限自适应运行线的示例。没有js。不过，请注意代码中的注释：

1. 您的线条长度可能小于屏幕宽度，因此您需要复制文本。

2. 加载字体和渲染后，您需要知道线条的确切长度（以像素为单位）。这个可以用js来计算。或者预先计算好并写入代码中。不幸的是，字体在不同浏览器中的渲染方式不同，因此您需要在每个浏览器中单独测试代码。

   CodePen 链接

body {
  display: flex;
  min-height: 100vh;
}

.running-line-wrapper {
  margin: auto;
  width: 100%;
  overflow: hidden;
}

.running-line {
  font-size: 100px;
  font-family: sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  color: #444;
  white-space: nowrap;
}

.running-line {
  animation: run 2s linear infinite;
}

@keyframes run {
  from {
    transform: translateX(0%);
  }
  /* Magic is here. This is the width of the elem with text after rendering the page */
  to {
    transform: translateX(-1683.35px);
  }
}

<div class="running-line-wrapper">
  <div class="running-line">
    <!-- The overall width of the text element should be twice the width of the screen -->
    <span>Lorem ipsum dolor sit amet *</span>
    <span>Lorem ipsum dolor sit amet *</span>
    <span>Lorem ipsum dolor sit amet *</span>
  </div>
</div>