使图像水平滚动无限，不间断CSS

wz8daaqr 于 2022-12-01 发布在其他

关注(0)|答案(2)|浏览(167)

我试图使一个标志组合旋转木马，滚动水平在一个无限的方式。
我几乎已经完成了，但它会打破动画，而不是无缝的。我需要它是一个真正的无限动画没有休息。
https://jsfiddle.net/nha3grjL/#&togetherjs=sy1LFN4qOJ
第一个

2条答案

我不太明白宽度250 vw的设置。尝试用宽度替换它：fit-content。然后-50% translate会将图像转换到正确的位置。
[我假设，如果你正在显示不同的图像，你知道把一个完整的副本，他们都到HTML，所以-50%的工作]。
第一个

我相信用这个代替你的关键帧是可行的，只需要写你的图片（宽度 * -1）而不是我的评论

@keyframes scrollText {
  0% {
    transform: translate3d(0, 0, 0);
 }
  100% {
    transform: translate3d(/* Your image width */, 0, 0); 
 }
}

对不起，不好formating我新来的