<分区>
我想在我的网站上有一个 slider ，到目前为止，我只能使用实际的 <img> 来实现它。我知道可以让您的图片淡入然后淡出，而不是背景图片，但我想知道是否可以让您的背景图片从页面上滑出。
最佳答案
您可以使用 CSS3 的多背景支持并使用标准动画进行滑动:
.slideshow {
width: 600px;
height: 400px;
border: 1px solid #999;
background: url(http://lorempixel.com/600/400/sports?_=1) 0 0 no-repeat,
url(http://loremflickr.com/600/400/sports?_=2) 600px 0 no-repeat,
url(http://loremflickr.com/600/400/sports?_=3) 1200px 0 no-repeat,
url(http://loremflickr.com/600/400/sports?_=4) 1800px 0 no-repeat;
animation: slide-right 15s forwards 1s;
}
@keyframes slide-right{
0% {
background-position: 0 0, 600px 0, 1200px 0, 1800px 0
}
16%, 33% {
background-position: -600px 0, 0 0, 600px 0, 1200px 0
}
49%, 66% {
background-position: -1200px 0, -600px 0, 0 0, 600px 0
}
85%, 100% {
background-position: -1800px 0, -1200px 0, -600px 0, 0 0
}
}<div class="slideshow"></div>关于html - 是否可以仅使用 html/css 创建背景图像 slider ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38235029/