從第一張背景圖片到第二張背景圖片5秒後淡入淡出

我有一棟建築物的背景圖片（拍攝很多年前）。 5秒鐘後，我想淡出同一建築物的第二張背景圖像（最新照片）。保留第二張背景圖片，直到頁面重新加載。這是可能的CSS，JavaScript，jQuery和lazyload插件？從第一張背景圖片到第二張背景圖片5秒後淡入淡出

來源

2015-07-04 Scott Wissler

是的，它是可能的。怎麼辦？你想要一個代碼示例嗎？ –

你可以用CSS單獨做，單獨使用javascript - jQueery膨脹取決於你，如果你已經使用jQueery，那麼沒問題，但不要用jQueery膨脹你的頁面這樣簡單 –

這是否幫助http： //stackoverflow.com/questions/7318462/changing-background-image-with-css3-animations –

我試圖讓它在沒有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/

來源

2015-07-04 08:42:53 Slimmi

在鉻中工作，在firefox，internet exploder和其他未經測試的瀏覽器中不起作用 –

@JaromandaX您應該添加-webkit-， -moz-和-o-前綴。但請記住，這是現代瀏覽器。如果你想支持舊瀏覽器，那麼你想使用JavaScript。 – Slimmi

它不適用於firefox，它不需要-moz-前綴動畫 –

這裏是JS + CSS解決這個。這可能會幫助你的。（在Chrome測試）

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; 
 
}

<img height="200" id="slide" src="http://www.w3schools.com/html/html5.gif" width="400" />

來源

2015-07-04 09:27:25

從第一張背景圖片到第二張背景圖片5秒後淡入淡出

回答

相關問題