Question

我有一个建筑物的背景图片（许多年前拍摄）。 5秒钟后，我想淡入同一建筑物的第二张背景图片（最新图片）。保留第二张背景图片，直到重新加载页面。这可能是CSS，javascript和jquery以及lazyload插件吗？

Answer 1

我试图在没有JavaScript的情况下完成它。

CSS看起来像：

body {
    background: url('path_to_your_background_image_1');
    animation: change_background 1s ease-out 5s 1 forwards;
}

@keyframes change_background {
    to {
        background-image: url('path_to_your_background_image_2');
    }
}

以下是http://jsfiddle.net/u9jw7k5q/1/

的示例

Answer 2

以下是JS + CSS解决方案。这可能对您有帮助。（在Chrome中测试）

loader.source = "content.qml"

var timer;

function swapImage() {
  var slide = document.getElementById('slide');
  slide.className = "fade-in";
  slide.src = "http://www.w3schools.com/images/w3cert.gif";
  clearTimeout(timer);
}
timer = setTimeout("swapImage()", 5000);

@keyframes fadeIn {
to {
    opacity: 1;
  }
}

.fade-in {
  opacity: 0;
  animation: fadeIn .5s ease-in 1 forwards;
}

从第1张背景图像到第2张背景图像5秒后淡入载入

2 个答案: