如何在後臺自動放大和縮小圖像

Question

我使用CSS設置了HTML中的背景圖像，圖像是一個全尺寸的背景圖像，覆蓋了所有的網頁。我想要做的是在沒有任何用戶交互的情況下在後臺自動放大和縮小圖像。

這裏有一個gif解釋我想達到什麼;

Image Link: (As it is a .gif)

上我將如何做到這一點任何想法？我想象它會是某種JQuery插件，雖然我不是JQuery中最偉大的，但任何和所有的幫助將不勝感激！

謝謝！

Answer 1

首先，請不要這樣做，這是將人們驅離您的網站的一種可靠的方式！

說了這麼多，你可以實現你要找的內容單獨的CSS做的，沒有任何的JavaScript，通過應用animation您body標籤的background-size財產（或任何你使用的元素），像這樣：

body{ 
 
    -webkit-animation:zoom 5s infinite; 
 
    animation:zoom 5s infinite; 
 
    background:url(https://picsum.photos/1900/1900/?random) center center fixed no-repeat; 
 
} 
 
@-webkit-keyframes zoom{ 
 
    0%,100%{ 
 
     background-size:100%; 
 
    } 
 
    50%{ 
 
     background-size:125%; 
 
    } 
 
} 
 
@keyframes zoom{ 
 
    0%, 100%{ 
 
     background-size:100%; 
 
    } 
 
    50%{ 
 
     background-size:125%; 
 
    } 
 
}

你可以調整動畫設置，以滿足您的需求，您可能還需要使用更多的供應商前綴比我提供，這取決於瀏覽器支持你的水平把目標放在。有關瀏覽器兼容性表，請參閱caniuse.com。