Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/79.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Html 如何在背景中自动放大和缩小图像_Html_Css_Zooming - Fatal编程技术网

Html 如何在背景中自动放大和缩小图像

Html 如何在背景中自动放大和缩小图像,html,css,zooming,Html,Css,Zooming,我有一个HTML的背景图像集,使用CSS,图像是一个全尺寸的背景图像,覆盖了整个网页。我想做的是让图像在没有任何用户交互的情况下在背景中自动放大和缩小 这里有一张gif图,解释了我想要实现的目标 我该怎么做有什么想法吗?我想这可能是某种JQuery插件,虽然我不是JQuery方面最棒的,所以任何和所有的帮助都将不胜感激 谢谢 首先,请不要这样做,这肯定会让人们远离你的网站 话虽如此,您可以在不使用任何JavaScript的情况下,通过对body标记的属性或您正在使用的任何元素应用 身体{ -w

我有一个HTML的背景图像集,使用CSS,图像是一个全尺寸的背景图像,覆盖了整个网页。我想做的是让图像在没有任何用户交互的情况下在背景中自动放大和缩小

这里有一张gif图,解释了我想要实现的目标

我该怎么做有什么想法吗?我想这可能是某种JQuery插件,虽然我不是JQuery方面最棒的,所以任何和所有的帮助都将不胜感激


谢谢

首先,请不要这样做,这肯定会让人们远离你的网站

话虽如此,您可以在不使用任何JavaScript的情况下,通过对body标记的属性或您正在使用的任何元素应用

身体{ -webkit动画:缩放5s无限; 动画:变焦5s无限; 背景:urlhttps://picsum.photos/1900/1900/?random 中心固定不重复; } @-webkit关键帧缩放{ 0%,100%{ 背景大小:100%; } 50%{ 背景大小:125%; } } @关键帧缩放{ 0%, 100%{ 背景大小:100%; } 50%{ 背景大小:125%; }
} 首先,请不要这样做,这是一种肯定会让人们远离你的网站的方式

话虽如此,您可以在不使用任何JavaScript的情况下,通过对body标记的属性或您正在使用的任何元素应用

身体{ -webkit动画:缩放5s无限; 动画:变焦5s无限; 背景:urlhttps://picsum.photos/1900/1900/?random 中心固定不重复; } @-webkit关键帧缩放{ 0%,100%{ 背景大小:100%; } 50%{ 背景大小:125%; } } @关键帧缩放{ 0%, 100%{ 背景大小:100%; } 50%{ 背景大小:125%; }
}你希望这是连续的吗?@Shaggy是的,我希望:你希望这是连续的吗?@Shaggy是的,我希望:Edit:Nevermind,我想出了如何调整速度!谢谢你的帮助!是的,请阅读我上面链接的MDN页面上的动画,以了解有关各种属性的更多信息。在我上面的代码中,5s是动画的持续时间,即5秒。增加或减少该值以相应地调整速度。编辑:不管怎样,我已经想出了如何调整速度!谢谢你的帮助!是的,请阅读我上面链接的MDN页面上的动画,以了解有关各种属性的更多信息。在我上面的代码中,5s是动画的持续时间,即5秒。增大或减小该值以相应地调整速度。