我想在网页中添加更多交互式元素。如何制作背景图像缓慢放大和缩小
我之前在某些网站上看到的是,背景图像放大速度缓慢并退出。所以它看起来更像是一种生物。
我一直在互联网上搜索和这里。但我不知道这种技术是如何完成的,我不知道这种效果的名称。
我也认为这应该是相当容易实现这个与一些CSS3和HTML5。
的问题是:
- 是否有一个名字为这个效果,什么叫?
- 可以用纯CSS完成吗?
- 在线样本是否有基本的可用样本?
下面是HTML我脑子里想的:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test page</title>
<style>
body {
background-image: url("http://wallpapercave.com/wp/LXR5gFx.png");
background-size: 100% auto;
}
</style>
</head>
<body>
</body>
</html>
的目标是让背景图像缩放慢慢退了出去。就像它在呼吸。
它可以通过Css.Use开发者工具在浏览器中轻松完成的链接codepen。提示:了解:悬停在CSS中。 – Raghu
我有点熟悉:悬停。但背景应该始终保持移动。即使没有涉及鼠标活动 –
您可以使用'background-size'属性来实现动画,如回答中所示,但不建议使用,因为背景大小是可视属性,因此任何更改都会导致重绘,这将影响性能。更好的方法是像这个答案一样使用'transform' - http://stackoverflow.com/questions/34311417/css-animations-animation-is-slow-and-jiggles/34312019#34312019(second snippet)。我认为这个答案中的动画也非常接近你想要的。 – Harry