动画无限滚动背景图像答案

【问题标题】：Animate Infinite Scrolling Background Image动画无限滚动背景图像
【发布时间】：2019-07-03 04:29:49
【问题描述】：

我想要无限滚动背景图像动画。我怎样才能设置它只是不断向上，而不是回来？尽管如此，它还是让人讨厌。怎么可能？请帮助任何知道它的人。

我有一个链接： http://herinshah.com/wp/fortiflex/5-2/

CSS：

.et_pb_section.landing-page .et_pb_column_3_5 {
  background-color: #f6eb00;
  margin-right: 1%;
  padding: 0 10px;
  height: 100vh;
  background-image: url(images/ragazzi-logo.png);
  background-position: 0 0;
  background-size: cover;
  -webkit-animation: upward 15s linear infinite;
  animation: upward 15s linear infinite;
  border-right: 4px solid #000;
  display: block;
  background-repeat: repeat-y;
}

@-webkit-keyframes upward {
  to {
    background-position: 0 0;
  }
  from {
    background-position: 0 2174px;
  }
}

@keyframes upward {
  to {
    background-position: 0 0;
  }
  from {
    background-position: 0 2174px;
  }
}

【问题讨论】：

请添加您的代码
嗨，Xenio，你能检查一下我添加了 CSS 代码吗。
@HAPPYSINGH 添加您尝试过的html代码

标签： html css wordpress jquery-animate css-animations

【解决方案1】：

您需要将div 包裹在div 中。这是相同的工作fiddle
HTML

<div class="main">
    <div class="holder"></div>
</div>

CSS

     *{
      margin:0;
      padding:0
    }

    .main {
      height: 100vh;
      overflow: hidden;
    }

    .holder {
      height: 200vh;
      -webkit-animation: upwards 2.5s linear infinite;
      animation: upward 2.5s linear infinite;
      background: url(http://herinshah.com/wp/fortiflex/wp-content/themes/Divi/images/ragazzi-logo.png)  center yellow;
      background-size: 100% 50%;
    }

    @-webkit-keyframes upward {
     from {
        background-position: 0% 0%;
    }
    to {
        background-position: 0% -100%;
     }
    }

    @keyframes upward {
      from {
        background-position: 0% 0%;
    }
    to {
        background-position: 0% -100%;
     }
    }

【讨论】：

感谢亲爱的给我最好的解决方案。

【解决方案2】：

我感到非常有必要回答这个问题，因为我做过类似的事情：之前（双关语），而你的跳跃动画让我患上了癌症。

你需要弄乱伪 :after 元素并获得正确的高度。这应该可以帮助您入门。

此外，您的图像也没有完全正确地裁剪，因此请修复它，然后您就可以开始了。

<!DOCTYPE html>
<html>
    <head>
      <meta charset="utf-8">
      <title>Test</title>
  </head>
  <body onload="onloaded()">
    <div class="foo_section">
      <div class="foo_container">
        <img class="foo_image" src="http://herinshah.com/wp/fortiflex/wp-content/themes/Divi/images/ragazzi-logo.png" />
      </div> 
    </div>
  </body>
</html>

.foo_section {
  width: 100vw;
  height: 100vh;
  position: fixed;
  min-height: 400px;
}

.foo_container {
  width: 100%;
  position: relative;
  animation: infiniteScrollBg 10s infinite linear;
}

.foo_container:after {
  content: "";
  height: 500%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-color: #f6eb00;
  background-image: url('http://herinshah.com/wp/fortiflex/wp-content/themes/Divi/images/ragazzi-logo.png');
  background-size: 100% 20%;
}

.foo_image {
  width: 100%;
}

@-webkit-keyframes infiniteScrollBg {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(-200%);
  }
}

Codepen

我看到您也在使用优雅的主题。

【讨论】：

【解决方案3】：

我建议你有两个div 标签与相同的background。然后，为相同的div 设置动画并调整divs 的位置并设置动画以使其看起来不断向上滚动。

.container{
  width:600px;
  height:400px;
  background-color:yellow;
  margin:0 auto;
  position:relative;
  overflow:hidden;
}
.bg{
  width:100%;
  height:400px;
  background-repeat:no-repeat;
  background-size:contain;
  position:absolute;
  bottom:0;
}
.bg.bg1{
  transform: translate(0,0);
   animation: upward 3s linear infinite;
}
.bg.bg2{
  transform: translate(0,100%);
  animation: upward2 3s linear infinite;
}

@keyframes upward {
    to {
         transform: translate(0,-100%);
    }
    from {
       transform: translate(0, 0);
    }
}
@keyframes upward2 {
    to {
      transform: translate(0,0);
    }
    from {
      transform: translate(0,100%);
    }
}

我会这样做。 my codepen.

【讨论】：

感谢您推荐亲爱的 Romel Indemne。不知道怎么设置？你有任何演示链接。