如何让图片在后台自动放大和缩小

Question

我在 HTML 中设置了背景图片，使用 CSS，该图片是全尺寸背景图片，覆盖了整个网页。我想做的是在后台自动放大和缩小图像，无需任何用户交互。

这是一张 gif，解释了我想要实现的目标；

Image Link: (As it is a .gif)

关于如何执行此操作的任何想法？我想它会是某种 JQuery 插件，我在 JQuery 方面不是最棒的，但我们将不胜感激任何和所有帮助！

谢谢！

Answer 1

首先，请不要这样做，这肯定会让人们离开您的网站！

话虽如此，您可以单独使用 CSS 实现您想要的效果，而无需任何 JavaScript，方法是应用您的 animation to the background-size 属性 body 标记（或您使用的任何元素），如下所示：

body{
    -webkit-animation:zoom 5s infinite;
    animation:zoom 5s infinite;
    background:url(https://picsum.photos/1900/1900/?random) center center fixed no-repeat;
}
@-webkit-keyframes zoom{
    0%,100%{
        background-size:100%;
    }
    50%{
        background-size:125%;
    }
}
@keyframes zoom{
    0%, 100%{
        background-size:100%;
    }
    50%{
        background-size:125%;
    }
}

您可以调整动画设置以满足您的需要，您可能还需要使用比我提供的更多的供应商前缀，具体取决于您想要的浏览器支持级别。有关浏览器兼容性表，请参阅 caniuse.com。

如何让图片在后台自动放大和缩小

How to have an image zoom in and out automatically in the background

html

css

zooming