html - 水平滑动长图(全屏)

Question

需要一些帮助。

我需要水平滑动一次长图像，然后再水平滑动回来...我在这里学习了一个教程 https://css-tricks.com/creating-a-css-sliding-background-effect/一切正常。我的问题是我希望滑动图像是全屏的(图像高度需要适合浏览器视点)。当前图像为 7676 x 3939。背景大小:封面是一个选项，但图像太大，因此不适合高度。所以我想要一半的图像(3838px - 全屏)首先显示然后滑动到另一半然后再返回。

希望得到一些帮助。下面是我的代码。谢谢。

.wrapper {
    overflow: hidden;
}

.sliding-background {
    background: url("long-image.jpg") center;
    height: 100vh;
    width: 7676px;
    animation: slide 3s linear 1;
}

@keyframes slide {
    0%{
        transform: translate3d(0, 0, 0);
    }
    50%{
        transform: translate3d(-3838px, 0, 0);
    }
    100%{
        transform: translate3d(0, 0, 0);
    }
}

Answer 1

尝试将相对位置或绝对位置添加到 .sliding-background