Question

我有2张图片，我试图将其作为背景图片。我希望这些图像在2秒后淡入并淡出。目前，当我将鼠标悬停在图像上时，背景图像的变化正在发生。如何在没有任何悬停的情况下自动进行此更改？

＆＃13;

.bground {
  width:100%;
  position:relative;
  background: url(../img/bg1.jpg) no-repeat top center;
  -webkit-transition-property: background;
  -webkit-transition-duration: 1s;
}
.bground:hover {
  background: url(../img/bg2.jpg) no-repeat top center;
}

＆＃13;

<section id="bground" class="bground">
  <div class="display">
    <img src="img/logo.png" alt="Logo">
  </div>
  <div class="page-scroll">
    <a href="#about" class="btn btn-circle" style="color:#000000">
      <i class="fa fa-angle-double-down animated"></i>
    </a>
  </div>
</section>

＆＃13;

Answer 1

您可以使用animation property

我为你做了这个代码（有一些img）：

＆＃13;

.bground {
  width: 200px;
  height: 200px;
  position:relative;
  background: url("http://www.bizreport.com/2011/02/03/android-logo-200x200.jpg") no-repeat top center;
  -webkit-animation: 4s linear 0s infinite alternate test;
  -o-animation:4s linear 0s infinite alternate test; 
  animation:4s linear 0s infinite alternate test; 
}
@keyframes test {
    0%   {background-image: url("http://tech21info.com/admin/wp-content/uploads/2013/03/chrome-logo-200x200.png");}
    100% {background-image: url(http://www.bizreport.com/2011/02/03/android-logo-200x200.jpg");}
}

＆＃13;

<section id="bground" class="bground">
  <div class="display">
  </div>
  <div class="page-scroll">
    <a href="#about" class="btn btn-circle" style="color:#000000">
      <i class="fa fa-angle-double-down animated"></i>
    </a>
  </div>
</section>

＆＃13;

动画发生在2个背景图像上

1 个答案: