Question

我有全屏网站，上面有background-image: no-repeat和background-size: cover风格。我想制作动画，使背景图像在页面右侧的10秒内调整为350px的宽度和175px的高度。甚至有可能做到这一点？

body {
background-image: url(/image.png);
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 100%;
position: fixed;
}

我看到了一些Webkit动画，但是background-size: cover样式存在问题，因此该动画无法正常工作。

我尝试过：

$(function(){
$('body').one("mouseover", function() {
    $('body').addClass('hover');
});

}）;

但是它将立即调整图像大小并将其向右移动，我想将其线性调整。

非常感谢你们！：-）

Answer 1

您可以在CSS中添加以下内容：

body {
    background-position: center center;
    transition: background-size 10s ease-in-out, background-position 10s ease-in-out;
}

body.hover {
    background-size: 350px 170px;
    background-position: right center;
}

https://codepen.io/anon/pen/oPbqPm

但是，这样做的问题是它不会使大小调整动画。

Answer 2

我建议您不要将图像设置为背景。而是使用position和z-index属性将图像放置在所有其他元素的后面。设置后，您可以添加动画。有关使用z-index和position属性的更多详细信息，请参见下面的链接和“尝试一下”示例：-

https://www.w3schools.com/cssref/pr_pos_z-index.asp enter link description here

然后可以使用css动画调整imgae的大小。

要了解如何添加动画，请参见以下链接：- https://www.w3schools.com/css/css3_animations.asp

如何使用CSS / JS调整背景图片的大小

2 个答案: