字幕文本动画重置

uqcuzwp8  于 2021-09-29  发布在  Java
关注(0)|答案(0)|浏览(209)

我正在squarespace中创建一个网站,并实现了一个无限文本滚动。问题在于,在动画周期结束时,它会重置。
参考网站:PremierCitizensity.com
这是我的程序员使用的代码:

[data-section-id="60fa77839ea7dd121dbd947d"] {
  overflow: hidden;
}

body {
  overflow-x: hidden;
}

.vertscroll {
  margin: 0 auto;
  white-space: nowrap;
  position: absolute;
  span {
    display: inline-block;
    animation: vertscroll 40s linear infinite;
    &:nth-child(2) {
      animation-delay: 5s;
    }
  }
}

.marquee {
  position: relative;
  z-index: 1;
  width: 100000px;
  transform: translateX(0px);
  animation: 40s linear 0s infinite normal none running vertscroll;
  a {
    font-size: 24px;
    color: #626262;
    transition: all .2s;
    &:hover {
      color: #cfc194;
    }
  }
  .js-marquee-2 {
    margin-right: 0px;
    float: left;
  }
}

@keyframes vertscroll {
  100% {
    transform: translateX(-1400px);
  }
}
<div class="marquee">
  <div class="text js-marquee-2">
    <a href="/antiguaandbarbudacitizenship">Antiqua and Barbuda</a>&emsp;&emsp;<a href="/dominicacitizenship">Dominica</a>&emsp;&emsp;<a href="/stluciacitizenship">St. Lucia</a>&emsp;&emsp;<a href="/stkittsandneviscitizenship">St. Kitts and Nevis</a>&emsp;&emsp;
    <a
      href="/cypruscitizenship">Grenada</a>&emsp;&emsp;<a href="/cypruscitizenship">Cyprus</a>&emsp;&emsp;<a href="/maltacitizenship">Malta</a>&emsp;&emsp;<a href="/turkeycitizenship">Turkey</a>&emsp;&emsp;<a href="/vanuatucitizenship">Vanuatu</a>&emsp;&emsp;<a href="/montenegrocitizenship">Montenegro</a>&emsp;&emsp;
      <a
        href="/greececitizenship">Greece</a>&emsp;&emsp;<a href="/portugalcitizenship">Portugal</a>&emsp;&emsp;
  </div>
  <div class="js-marquee-2"><a href="/antiguaandbarbudacitizenship">Antiqua and Barbuda</a>&emsp;&emsp;<a href="/dominicacitizenship">Dominica</a>&emsp;&emsp;<a href="/stluciacitizenship">St. Lucia</a>&emsp;&emsp;<a href="/stkittsandneviscitizenship">St. Kitts and Nevis</a>&emsp;&emsp;
    <a
      href="/cypruscitizenship">Grenada</a>&emsp;&emsp;<a href="/cypruscitizenship">Cyprus</a>&emsp;&emsp;<a href="/maltacitizenship">Malta</a>&emsp;&emsp;<a href="/turkeycitizenship">Turkey</a>&emsp;&emsp;<a href="/vanuatucitizenship">Vanuatu</a>&emsp;&emsp;<a href="/montenegrocitizenship">Montenegro</a>&emsp;&emsp;
      <a
        href="/greececitizenship">Greece</a>&emsp;&emsp;<a href="/portugalcitizenship">Portugal</a>&emsp;&emsp;
  </div>
</div>

暂无答案!

目前还没有任何答案,快来回答吧!

相关问题