html-具有延迟和外观的水平滚动文本的问题

概述当我在第二个文本上添加animation-delay时,第一个出现而没有移动.而且我没有成功实现文本滚动的无限循环.动画结束时总会有一些断点.我尝试了一些在网上找到的代码,但没有一个完全符合我的意愿..scroll span { font-size: 1.5em; animation: scroll 20s linear infinite; po

当我在第二个文本上添加animation-delay时,第一个出现而没有移动.而且我没有成功实现文本滚动的无限循环.动画结束时总会有一些断点.

我尝试了一些在网上找到的代码,但没有一个完全符合我的意愿.

.scroll span {  Font-size: 1.5em;  animation: scroll 20s linear infinite;  position: absolute;  top: 92vh;  white-space: nowrap;  overflow: hIDden;}.second span {  animation-delay: 10s;}@keyframes scroll {  0% {    transform: translate(-100%,0);  }  100% {    transform: translate(100%,0);  }}

<div>  <p ><span>scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down </span></p>  <p ><span>scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down </span></p></div>

我只想要一个无限滚动的文本.最佳答案延迟第二个动画的原因是因为您将动画设置为从-100％到100％,这实际上是2个动画周期.因此,动画中大约有1个周期的空白中断.当文本在圆周上移动时,可以考虑一下.从-100％到0,文本在屏幕上移动,但是从0到100％,文本不在屏幕上,并旋转回到起点.您的动画应从-100％到0.

您还需要添加显示：inline-block和padding-left：.scroll span的100％,以并排保留2个span标签.

.scroll {  margin: 0 auto;  white-space: nowrap;  overflow: hIDden;  position: absolute;  Font-size: 1.5em;  position: absolute;  top: 92vh;  white-space: nowrap;}.scroll span {  display: inline-block;  padding-left: 100%;  animation: scroll 20s linear infinite;}.second span {  animation-delay: 10s;}@keyframes scroll {  0% {    transform: translate(-100%,0);  }  100% {    transform: translate(0,0);  }}

<div>  <p >    <span>scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down&nbsp;</span>  </p>  <p >    <span> scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down&nbsp;</span>  </p></div>

总结

以上是内存溢出为你收集整理的html-具有延迟和外观的水平滚动文本的问题 全部内容，希望文章能够帮你解决html-具有延迟和外观的水平滚动文本的问题 所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。