我正在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>  <a href="/dominicacitizenship">Dominica</a>  <a href="/stluciacitizenship">St. Lucia</a>  <a href="/stkittsandneviscitizenship">St. Kitts and Nevis</a>  
<a
href="/cypruscitizenship">Grenada</a>  <a href="/cypruscitizenship">Cyprus</a>  <a href="/maltacitizenship">Malta</a>  <a href="/turkeycitizenship">Turkey</a>  <a href="/vanuatucitizenship">Vanuatu</a>  <a href="/montenegrocitizenship">Montenegro</a>  
<a
href="/greececitizenship">Greece</a>  <a href="/portugalcitizenship">Portugal</a>  
</div>
<div class="js-marquee-2"><a href="/antiguaandbarbudacitizenship">Antiqua and Barbuda</a>  <a href="/dominicacitizenship">Dominica</a>  <a href="/stluciacitizenship">St. Lucia</a>  <a href="/stkittsandneviscitizenship">St. Kitts and Nevis</a>  
<a
href="/cypruscitizenship">Grenada</a>  <a href="/cypruscitizenship">Cyprus</a>  <a href="/maltacitizenship">Malta</a>  <a href="/turkeycitizenship">Turkey</a>  <a href="/vanuatucitizenship">Vanuatu</a>  <a href="/montenegrocitizenship">Montenegro</a>  
<a
href="/greececitizenship">Greece</a>  <a href="/portugalcitizenship">Portugal</a>  
</div>
</div>
暂无答案!
目前还没有任何答案,快来回答吧!