Question

我将更改setInterval函数中的元素。背景会立即发生变化，但我想在几秒钟内完成转换。

var act = true;
setInterval(function(){
  if (act) {
    $("div").addClass("back2")
    $("div").removeClass("back")
    act = false
  } else {
    $("div").addClass("back")
    $("div").removeClass("back2")
    act = true
  }
}, 10000)

.back{
  width:100px;
  height:100px;
  background-image:url("https://www.skoobe.de/static/v/7b2334ac8a86ab5d764bc6e94df87df4aa5b4e2adc78c783e73ae2cbaf613745.jpg");
  display:block;
  transition: .5s ;
}

.back2{
  width:100px;
  height:100px;
  
  background-image:url("https://www.skoobe.de/static/v/a5c0d3825217f88c4c893e7b630c4f1c5eb4c9bec834e1112383614270b5d583.jpg");
  display:block;
  transition: .5s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="c">tz</div>

Answer 1

background-image不是可设置动画的属性。如您在mozilla开发人员页面上的此列表中所见，这是不可能的：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties

您可以做的是将两个div的背景图像彼此重叠，然后使其中一个透明，以创建混合效果。

我做了一个小提琴来说明这个想法：

https://jsfiddle.net/Lpduw3mq/

// find elements
var firstDiv = $("#first")
var secondDiv = $("#second")

// Swap backgrounds
var act = true;
setInterval(function(){
  if (act) {
    firstDiv.addClass("transparent")
    secondDiv.removeClass("transparent")
    act = false
  } else {
    firstDiv.removeClass("transparent")
    secondDiv.addClass("transparent")
    act = true
  }
}, 5000)

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

.base {
  position: absolute;
  top: 0;
  left: 0;
}

.back {
  width: 100px;
  height: 100px;
  background-image: url("https://www.skoobe.de/static/v/7b2334ac8a86ab5d764bc6e94df87df4aa5b4e2adc78c783e73ae2cbaf613745.jpg");
  display: block;
  opacity: 1;
  transition: opacity 0.5s;
}

.back2 {
  width: 100px;
  height: 100px;
  background-image: url("https://www.skoobe.de/static/v/a5c0d3825217f88c4c893e7b630c4f1c5eb4c9bec834e1112383614270b5d583.jpg");
  display: block;
  opacity: 1;
  transition: opacity 0.5s;
}

.transparent {
  opacity: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="first" class="base back"></div>
<div id="second" class="base back2 transparent"></div>

Answer 2

您可以使用两个项目的无序列表，这些项目必须使用图像背景进行绝对样式设置，并可以使用关键帧动画在这两个项目之间进行更改，同时平滑地更改背景不透明度。签出http://tympanus.net/codrops/2012/01/02/fullscreen-background-image-slideshow-with-css3/

后台转换无法正常工作

2 个答案: