如何创建简单的图像滑块

Question

我能给出的最好的例子是这个subreddit的标题。 https://www.reddit.com/r/Frat/我想创造这种确切的效果。我google的所有内容都会让我看到只是在同一位置替换相同图像的图像滑块或幻灯片。我无法找到一种方法来让图像重复滑动，如示例网站所示。

Answer 1

检查元素时，会出现以下内容。因此，他们创建了一个非常长的PNG图像并设置了动画＆＃34;滚动。

#header {
background: url(//b.thumbs.redditmedia.com/mcxWBBMc21iKf16f9Zl8mzB--6d7_KL19LjnNbwfP6Q.png);
animation: scroll 200s linear infinite;

Answer 2

要创建相同的效果，您需要创建@keyframe规则，这样您就可以控制动画的中间步骤（在这种情况下是转换），我举了一个例子：https://codepen.io/jdplee/pen/GMRNVr

您可以为更多步骤添加更多规则：

@keyframes scroll {
  0% { background-position: 0 0; }
  30% { //CSS }
  68%, 72% { //CSS }
  100% { background-position: -1920px 0; }
}