在循環中移動背景圖片

Question

我想在我的頁面對角線上有一個移動的背景圖像，就像在[網站​​] [1]和翻轉元素（如「網站開發人員」，「搜索引擎優化顧問」請提出如何達到這個效果。

Answer 1

有很多選擇。

<div></div>

div { 
 
    background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/d/de/Fonte_Gaia_-_she_wolf_detail.jpg/500px-Fonte_Gaia_-_she_wolf_detail.jpg"); 
 
    background-repeat:no-repeat; 
 
    background-attachment:fixed; 
 
    background-size:cover; 
 
    background-position:center-top; 
 
    background-position-x: 50%; 
 
    background-position-y: 0%; 
 
    -webkit-animation: zoomin 5s 1; 
 
} 
 

 
@-webkit-keyframes zoomin { 
 
    0% { 
 
     -webkit-transform: scale(1); 
 
    } 
 
    100% { 
 
     -webkit-transform: scale(2); 
 
    } 
 

 
}

Answer 2

（這是瞭解如何改變在一個循環的背景圖像。要了解如何移動，看到@巴勃羅的答案）

見this fiddle
這篇使用數組來存儲鏈接並使用以下javascript處理它們：

function changeBGImage() { 
    document.getElementById("main").style.backgroundImage = "url('" + images[next] + "')"; 
    next++; 
    next %= 3; 
} 

P.S.使用3，因爲這是陣列中的圖像數量