如何在背景中的图像变焦和自动退出(How to have an image zoom in and

2019-10-23 02:31发布

我在HTML背景图片设置,使用CSS,图像是一个全尺寸的背景图片,涵盖了所有的网页。 我想要做的就是有图像的放大和在没有任何用户交互的底色自动退出。

这里有一个GIF解释想什么,我来实现;

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

在我将如何做到这一点任何想法? 我想象这将是某种形式的jQuery插件的,我不是最伟大的JQuery的,但这样的任何和所有帮助将不胜感激!

谢谢!

Answer 1:

首先,请不要这样做,这是从您的网站驱赶人们离开的确保消防方式!

说了这么多,你可以实现你要找的内容单独的CSS做的,没有任何的JavaScript,通过将animationbackground-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 zoom