需要一些帮助。
我需要水平滑动一次长图像,然后再水平滑动回来...我在这里学习了一个教程 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);
}
}
最佳答案
尝试将相对位置或绝对位置添加到 .sliding-background
关于html - 水平滑动长图(全屏),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57441438/