html网页商品销量滞后怎么做,html-具有延迟和外观的水平滚动文本的问题

当我在第二个文本上添加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);

}

}

scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down

scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down

我只想要一个无限滚动的文本.

最佳答案

延迟第二个动画的原因是因为您将动画设置为从-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);

}

}

scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down 

scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down 

总结

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

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。

小编个人微信号 jb51ccc

喜欢与人分享编程技术与工作经验，欢迎加入编程之家官方交流群！