身体背景的放大效果

Question

身体背景的放大效果

4

我想让页面加载时背景图片放大。以下是我拥有的代码。

CSS：

body, html { 
    font-size: 100%; 
    padding: 0;
    margin: 0;   
    background-image: url(bg.jpg); 
    background-size: 100%;
    transition: all ease-in 5s;   

}

JQuery：

 $( document ).ready(function() {         
          $(document.body).css("background-size", "140%");
      });

我试图在页面加载时更改图片的background-size属性，但这并没有起作用。我做错了什么？

- Sooraj

6个回答

2

希望这能解决你的问题

只是一个简单的 jquery 动画播放

$("body").animate({
    "background-size" : "180px"
},2000);

请尝试此实时演示 http://jsfiddle.net/g2ef7gc4/25/

- Roshan Padole

1

尝试

$("body").animate({
    "background-size", "140%"
},20000, function() { alert(); });

请参见背景缩放效果的示例。

- Akhilesh Kumar

动画实际上正在发生，当我检查元素时，我可以看到背景大小慢慢变化，但只有在完成时才反映出来。 - Sooraj

似乎我必须将“linear”作为参数添加，因为默认值是swing。但它会出现错误“Uncaught TypeError: n.easing[this.easing] is not a function”。 - Sooraj

使用关键帧来利用CSS会更容易，但是根据你的观点，他应该使用“forwards”而不是“linear”。 - AGE

1

你编写的代码有误。朋友，请注意，你的代码应该像这样 "background-size": "140px."。而你提供的链接毫无意义。请注意……好吗……你是在试图推广你的网站吗？ - Jaffer Wilson

1

这是你的代码所需的带有延迟和回调功能的jQuery函数。

$(document).ready(function () {
    $('body').animate({ backgroundSize: '135%'
    }, 2000, 'linear', function () {
        console.log("called");
    });

      });

- Svetlin Krastanov

0

为什么你不在CSS内部制作缩放效果？

body, html { 
    font-size: 100%; 
    padding: 0;
    margin: 0;   
    background-image: url(bg.jpg); 
    background-size: 140%;
    transition: all ease-in 5s;   
}

- sh1omi

因为我希望页面加载后缓慢放大，所以使用了过渡效果。如果直接在CSS中使用它，它会在页面加载时给出缩放后的图像，这不是我想要的。 - Sooraj

-1

@sooraj 只需像演示那样设置高度和宽度

 $( document ).ready(function() {         
          $(document.body).css("background-size", "140%");
      });

body, html { 
    font-size: 100%; 
    padding: 0;
    margin: 0;   
    background-image: url(//images.visitcanberra.com.au/images/canberra_hero_image.jpg); 
    background-size: 100%;
    transition: all ease-in 5s;   
        height:500px;
    width:100%;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body></body>

- Mansukh Khandhar

请将您的项目放在实时服务器上，然后给我链接，我会检查它。 - Mansukh Khandhar

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- AGE · Accepted Answer

你所需要的是：

html, body {
    background: url("http://placehold.it/200x200") top center no-repeat;
    animation: animateBg forwards 2s ease-in;
}
@keyframes animateBg{
    from { background-size: 200px; }
    to { background-size: 100%; }
}

注意：该图像只是一个占位符，您可以更改它以及animateBg关键帧动画的background-size属性（以及您需要的任何其他内容）。如果您不知道forwards。

确保花一点时间阅读CSS Animations，在选择jQuery和CSS时，能够首先利用CSS非常方便。

如果这对您有用，请告诉我，否则我们可以一起制定更好的答案 :)