动画无限滚动背景图像

Question

我想要无限滚动背景图像动画。我怎样才能设置它一直向上，而不是回落？仍然，它给了一个混蛋。怎么可能？请知道的人帮忙看看。

我有一个link： 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;
  }
}

Answer 1

我建议您有两个 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.

Answer 2

我觉得有必要回答这个问题，因为我做过类似的事情 :before （双关语意）而你的跳跃动画让我得了癌症。

您将需要处理伪 :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

我看到你也在使用 Elegant Themes。 <3 迪维生成器

Answer 3

您需要将 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%;
     }
    }

动画无限滚动背景图像

Animate Infinite Scrolling Background Image

html

css

wordpress

css-animations

jquery-animate