使用CSS或JavaScript縮放背景圖片

Question

我想隨時間縮放div的背景圖像，以使其看起來像在放大和縮小（而無需將鼠標懸停在上面-我只是在尋找動畫自動開始）。 但是，無論我如何嘗試，背景動畫都顯得不連貫。

如果將div設置為可縮放，則過渡是平滑的，但它將縮放整個div，而不僅僅是背景圖像。 有關其他信息，我正在運行最新版本的Chrome，並且已在Windows和OS上進行了嘗試。 您可以在此處查看示例： https ： //jsfiddle.net/sdqv19a0/

 <div class="site-main-banner">

        <div class="caption">
            <!-- Bootstrap -->
            <div class="container">
                <div class="row">
                    <div class="col-xs-12">

                        <!-- figure -->
                        <figure> <img src="images/signature.png" alt="signature"> </figure>
                        <!-- H1 Heading -->
                        <h1 class="typewrite" data-period="2000" data-type='[ "Purposeful design", "Data-driven marketing", "Dynamic branding", "I love it all." ]'> <span class="wrap"></span> </h1>
                        <!-- H2 Heading -->
                        <h2>graphic designer • web designer • analytical marketer</h2>
                        <div class="clearfix"> </div>
                        <!-- Button -->
                        <a href="#" class="theme-btn">view my portfolio</a>

                    </div>
                </div>
            </div>
        </div>

CSS：

.site-main-banner {
float:left;
width:100%;
background:url(https://preview.ibb.co/m8kxST/static_banner_new.jpg) no-repeat center center;
background-attachment:fixed;
background-size:cover;
margin: 0;
padding: 0;
display: block;
clear: both;
position: relative;
text-align:center;
overflow: hidden;
animation: shrink 5s infinite alternate steps(60);
}
@keyframes shrink {
0% {
background-size: 110% 110%;
}
100% {
background-size: 100% 100%;
}
}
.site-main-banner a.theme-btn {
color: #FFFFFF;
border:#FFFFFF solid 1px;
background:none;
box-shadow:none;
}
.site-main-banner a.theme-btn:hover {
color: #bc6ca7;
border:#FFFFFF solid 1px;
background:#FFFFFF;
box-shadow:none;
}
.site-main-banner .caption {
position: relative;
float: left;
top: 50%;
left: 50%;
transform: translate(-50%);
padding:300px 0;

}
.site-main-banner figure {
float:left;
width:100%;
text-align:center;
padding:0 0 15px 0;
}

有什么建議嗎？ 我也對js解決方案持開放態度，只是對JavaScript不太滿意。 謝謝！

Answer 1

將背景分成主要橫幅后面的自己的元素，這樣您就可以應用關鍵幀動畫來分別改變背景的比例。

 body, html { margin: 0; padding: 0; } .site-space-background { position: fixed; height: 100%; width: 100%; background: #1A1939 no-repeat center center; background-image: url(https://preview.ibb.co/m8kxST/static_banner_new.jpg); background-attachment: fixed; background-size: cover; animation: shrink 5s infinite alternate steps(60); } @keyframes shrink { 0% { transform: scale(1.2) } 100% { transform: scale(1.0) } } 

 <div class="site-space-background"></div> <div class="site-main-banner"> <!-- The rest --> </div> 

Answer 2

我將css transform屬性與偽元素結合使用。

.site-main-banner {
    position: relative;
    overflow: hidden;
}

.site-main-banner:after {
    content: “”;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    background-image: url(...);
    // put your animation here
}

我目前無法真正發送完整的示例，因為我目前正在地鐵里打電話，但希望您能想到。

Answer 3

嘗試使用以下transform: scale([values]); 在您的動畫中。 使用transform元素非常適合應用比例動畫。 看看這個Jsfiddle 。 我調整了您的一些代碼（由於我只編輯了CSS動畫，所以沒有那么多）。