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

Question

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

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

图片链接：（因为它是.gif）

关于如何执行此操作的任何想法？ 我在想这将是某种JQuery插件，尽管我并不是JQuery的佼佼者，所以任何帮助都将不胜感激！

谢谢！

Answer 1

首先，请不要执行此操作，这是使人们远离您的站点的肯定方法！

话虽如此，您可以通过将animation应用于body标签（或使用的任何元素）的background-size属性，而无需使用任何JavaScript来单独实现CSS的目标，如下所示：

 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 。