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

Question

我有一个用HTML设置的背景图像,使用CSS,图像是一个完整大小的背景图像,覆盖了所有的网页.我想做的是让图像在后台自动放大和缩小,无需任何用户交互.

这是一个gif解释我想要实现的目标;

图片链接:(因为它是.gif)

有关如何做到这一点的任何想法？我想象它将是某种JQuery插件,我不是JQuery中最伟大的,所以任何和所有的帮助将不胜感激!

谢谢!

Answer 1

首先,请不要这样做,这是一种将人们赶出您网​​站的可靠方法!

话虽如此,你可以通过对标签animation的background-size属性body(或者你正在使用的任何元素)应用一个单独的CSS,没有任何JavaScript来实现你想做的事情,如下所示:

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.