Question

我想实现网站加载背景“放大”的效果。文档准备好后，背景图像应逐渐缩小。

我决定在背景中使用绝对定位元素：

HTML：

<div class="intro">
  <div class="intro_bg"></div>
</div>

CSS：

.intro {
   width: 100vh; height: 95vh;
}

.intro_bg {
    width: 140%;
    height: 140%;

    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;

    background: url(../images/hills.jpg) no-repeat center center fixed;
    background-size: cover;
}

jQuery：

    $('.intro_bg').animate({
        'width': '100%',
        'height': '100%'
    },20000, function() { alert(); });

基本上，这不起作用。它成功缩放.intro_bg，但图像似乎没有像预期的那样缩小。图像本身不会缩放或移动（可能是cover的整点）。

如果我的想法不起作用，那么实现“背景缩小”效果的最佳解决方案是什么？

Answer 1

为什么不在超时时使用缩放变换应用转换类（以防止立即应用）？

这具有在功能（JS）和表示（CSS）之间保持明确的关注点分离的附加优点

Demo Fiddle

HTML

<div class="intro">
    <div class="intro_bg"></div>
</div>

CSS

.intro {
    width: 600px;
    height:600px;
    overflow:hidden;
}
.intro_bg {
    width: 100%;
    height: 100%;
    background: url(http://www.picturesnew.com/media/images/image-background.jpg);
    background-position:center center;
    background-size:cover;
    transform:scale(1);
    transition:all 4s ease-in;
}
.intro_bg.zout {
    transform:scale(6); /* <--- change the scale of zoom out as appropriate */
}

JQ

setTimeout(function(){
    $('.intro_bg').addClass('zout');
},1000);

Answer 2

您可以尝试将'％'替换为'px'。

$('.intro_bg').animate({
    'width': '100%',
    'height': '100%'
},20000, function() { alert(); });

后：

$('.intro_bg').animate({
    'width': '100px',
    'height': '100px'
},20000, function() { alert(); });

<强> Jsfiddle

希望工作和帮助

Answer 3

<强> Demo

CSS

.intro_bg {
    width: 1000px;
    height: 1000px;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin:auto;
    position: absolute;
    z-index: -1;
    background: url(http://blog.jimdo.com/wp-content/uploads/2014/01/tree-247122.jpg) no-repeat center center;
    background-size: cover;
}

背景图像缩小效果

3 个答案:

Demo Fiddle