Question

   background: #ececec url(images/x/x.jpg) top left repeat-x;

我想滑动它。它是一个循环的图像。我想从左到右或从右到左滑动它。事情并不重要......我怎么能这样做？

Answer 1

您可以尝试使用关键帧，这是一个很好的例子; http://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp

Answer 2

如果您想将animation添加到background，那么您可以使用伪元素并向其添加animation

div {
  position: relative;
  height: 200px;
  width: 200px;
  border: 1px solid red;
  overflow: hidden;
}
div:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  z-index:-1;
  background: url(http://placehold.it/200x200) no-repeat;
  -webkit-animation: slide 4s linear infinite;
  -moz-animation: slide 4s linear infinite;
  animation: slide 4s linear infinite;
}
@-webkit-keyframes slide {
  0% {
    left: 101%;
  }
  100% {
    left: -101%;
  }
}
@-moz-keyframes slide {
  0% {
    left: 101%;
  }
  100% {
    left: -101%;
  }
}
@keyframes slide {
  0% {
    left: 101%;
  }
  100% {
    left: -101%;
  }
}

<div class="slide">
  <p>The background image is moving</p>
</div>

CSS - 幻灯片循环

2 个答案: