HTML 5/CSS動畫 - 滾動平鋪背景圖像

Question

我在html中看到了一些補間動畫的示例，但似乎無法找到符合我確切需要的明確答案。

我正在嘗試製作佔據100％網頁高度的某個寬度的div。這個div應該有一個平鋪的背景圖像。

這是棘手的部分 - 我希望平鋪圖像在div內以可設定的速度垂直滾動。

有沒有簡單的解決方案呢？

Answer 1

您可以通過動畫background-position屬性來完成此操作。

body{ 
 
    background: url("https://www.google.be/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png") repeat; 
 
    -webkit-animation: scrolling 5s linear infinite; 
 
    -moz-animation: scrolling 5s linear infinite; 
 
    -o-animation: scrolling 5s linear infinite; 
 
    animation: scrolling 5s linear infinite; 
 
} 
 

 
@-webkit-keyframes scrolling { 
 
    from{ 
 
     background-position: 0 0; 
 
    } 
 
    to{ 
 
     background-position: 0 105%; 
 
    } 
 
}