動畫背景擬合屏幕

Question

我在啓動屏幕上有一個背景圖像，從100％慢慢放大到200％（除了讓頁面有點生命外，沒有其他原因）。它在水平屏幕上可以很好地工作，但是當屏幕很窄時（對於移動設備而言），由於圖像不再填充背景，頂部和底部都有白色空間。如果我將背景大小更改爲「覆蓋」，則動畫無法正常工作（它將從0％變大而不是填充屏幕）。

所以我的問題是 - 我如何設置初始大小來覆蓋所以它總是填滿屏幕，然後慢慢放大到200％？

$('.background').animate({ 
 
    backgroundSize: "200%" 
 
\t }, 40000);

body { 
 
\t margin: 0; 
 
\t padding: 0; 
 
} 
 

 
.background { 
 
\t width: 100%; 
 
\t height: 100vh; 
 
\t background-image:url(Front-Cover.jpg); 
 
\t background-size: 100%; 
 
\t background-repeat: no-repeat; 
 
\t background-position: center center; 
 
} 
 
\t 
 
.header { 
 
\t width: 100%; 
 
\t position: absolute; 
 
\t top: 0; 
 
\t left: 0; 
 
} 
 
\t 
 
.header img { 
 
\t width: 100%; 
 
\t height: auto; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="header"> 
 
\t <img src="header.png" alt=""> 
 
</div> 
 

 
<div class="background"></div>

Answer 1

我不能讓你的代碼段工作。給這個CSS一槍，不需要jquery。

.background { 
     width:100%; 
     height:100%; 
     background-image:url(Front-Cover.jpg); 
     background-position: center; 
     background-size: cover; 
     animation: 5s ease example infinite; 
} 

@keyframes example { 
    0% { transform: scale(1);} 
    50% { transform: scale(2);} 
    0% { transform: scale(1);} 
} 

@keyframes example { 
    0% { -webkit-transition: scale(1);} 
    50% { -webkit-transition: scale(2);} 
    0% { -webkit-transition: scale(1);} 
} 
    @keyframes example { 
    0% { -moz-transition: scale(1);} 
    50% { -moz-transition: scale(2);} 
    0% { -moz-transition: scale(1);} 
}