无法使 HTML 中的选取框文本连续

编程问答 2022-04-30

问题描述

我正在尝试使我的选取框文本连续，但也不知道怎么做。这就是我现在在 HTML 中的内容：

.marquee2 {
    position: relative;
    overflow: hidden;
    --offset: 20vw;
    --move-initial: calc(-20% + var(--offset));
    --move-final: calc(-40% + var(--offset));
}

.marquee__inner2 {
    width: fit-content;
    display: flex;
    position: relative;
    transform: translate3d(var(--move-initial),0);
    animation: marquee 12s linear infinite;
    animation-play-state: play;
    color: #1a1a1a;
    font-family: 'Noctis Bold';
}

.marquee2 span {
    font-size: 5vh;
    padding: 0 2vw;
}

.marquee2:hover .marquee__inner2 {
    animation-play-state: paused;
}

@keyframes marquee2 {
    0% {
        transform: translate3d(var(--move-initial),0);
    }

    100% {
        transform: translate3d(var(--move-final),0);
    }
}
    <div class="bg33">
        <div class="marquee2" id="showScroll2">
            <div class="marquee__inner2" aria-hidden="true">
                <span>HTML</span>
                <span>CSS</span>
                <span>SASS</span>
                <span>JAVASCRIPT</span>
                <span>JQUERY</span>
                <span>VUE.JS</span>
                <span>PYTHON</span>
                <span>JAVA</span>
                <span>REACT</span>
                <span>GIT</span>
                <span>NPM</span>
                <span>RSTUdio</span>
                <span>JIRA</span>
                <span>AGILE</span>
                <span>figMA</span>
                <span>PS</span>
                <span>ILLUSTRATOR</span>
                <span>BALSAMIQ</span>
            </div>
        </div>
    </div>

文本似乎不是连续的，它中断并重新开始，这很烦人并且没有显示所有文本。我希望这段文字循环播放，让观众看到连续和完整的内容。有人能帮我解决这个问题吗？

解决方法

这样做的一个简单方法 - 如果您知道文本至少会覆盖视口宽度 - 是拥有第二个副本。然后将整个物体向左移动一半的宽度并重新开始。

enter image description here

这是更改后的代码段，请注意您不需要初始设置条件来居中任何内容。

  .marquee2 {
  position: relative;
  overflow: hidden;
  --offset: 20vw;
  --move-initial: calc(-20% + var(--offset));
  --move-final: calc(-40% + var(--offset));
}

.marquee__inner2 {
  width: fit-content;
  display: flex;
  position: relative;
  transform: translate3d(0,0);
  animation: marquee2 12s linear infinite;
  animation-play-state: play;
  color: #1a1a1a;
  font-family: 'Noctis Bold';
}

.marquee2 span {
  font-size: 5vh;
  padding: 0 2vw;
}

.marquee2:hover .marquee__inner2 {
  animation-play-state: paused;
}

@keyframes marquee2 {
  0% {
    transform: translate3d(0,0);
  }
  100% {
    transform: translate3d(-50%,0);
  }
<div class="bg33">
  <div class="marquee2" id="showScroll2">
    <div class="marquee__inner2" aria-hidden="true">
      <span>HTML</span>
      <span>CSS</span>
      <span>SASS</span>
      <span>JAVASCRIPT</span>
      <span>JQUERY</span>
      <span>VUE.JS</span>
      <span>PYTHON</span>
      <span>JAVA</span>
      <span>REACT</span>
      <span>GIT</span>
      <span>NPM</span>
      <span>RSTUDIO</span>
      <span>JIRA</span>
      <span>AGILE</span>
      <span>FIGMA</span>
      <span>PS</span>
      <span>ILLUSTRATOR</span>
      <span>BALSAMIQ</span>
      <span>HTML</span>
      <span>CSS</span>
      <span>SASS</span>
      <span>JAVASCRIPT</span>
      <span>JQUERY</span>
      <span>VUE.JS</span>
      <span>PYTHON</span>
      <span>JAVA</span>
      <span>REACT</span>
      <span>GIT</span>
      <span>NPM</span>
      <span>RSTUDIO</span>
      <span>JIRA</span>
      <span>AGILE</span>
      <span>FIGMA</span>
      <span>PS</span>
      <span>ILLUSTRATOR</span>
      <span>BALSAMIQ</span>
    </div>
  </div>
</div>

htmljavascriptmarqueemarquee