动画无限滚动背景图像

我想动画滚动背景图像。我该如何将其设置为不断向上，而不是回来？尽管如此，它还是个混蛋。怎么可能？请帮助任何人知道。

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

您需要在div内包装div。这是相同的工作小提琴
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%;
     }
    }

我觉得自己不得不回答这个问题，因为我做了类似的事情：(双关语意图(和您的跳过动画正在给我癌症。

您需要弄乱伪：在元素之后，并正确获得高度。这应该让您入门。

您的图像也不完美地裁剪好，所以请修复它，您将很好地走。

<!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

我也看到您也在使用优雅的主题。＆lt; 3 Divi Builder

我建议您有两个具有相同background的div标签。然后，对相同的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%);
    }
}

这是我的方式。我的codepen。

相关内容

最新更新

热门标签：