如何制作背景图像缓慢放大和缩小

问题描述：

我之前在某些网站上看到的是，背景图像放大速度缓慢并退出。所以它看起来更像是一种生物。

我一直在互联网上搜索和这里。但我不知道这种技术是如何完成的，我不知道这种效果的名称。

我也认为这应该是相当容易实现这个与一些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

答

主要有两种不同的方法，使用animation或transition。

animation当人们想要一直在运行的东西时，通常会更好，而transition对于例如悬停的影响。

这里是一个开始使用animation。

栈片断

html, body { 
 
    height: 100%; 
 
    margin: 0 
 
} 
 

 
@keyframes breath { 
 
    0% { background-size: 100% auto; } 
 
    50% { background-size: 140% auto; } 
 
    100% { background-size: 100% auto; } 
 
} 
 

 
#bkg{ 
 
    width: 100%; 
 
    height: 100%; 
 
    animation: breath 4s linear infinite; 
 
    background: url("http://wallpapercave.com/wp/LXR5gFx.png") center center no-repeat; 
 
}

<div id="bkg"></div>

非常感谢！这节省了很多时间！它就像一个魅力！所以我寻找的CSS被称为。动画：呼吸： :) –

不客气，你可以将它命名为你想要的方式:) – LGSon

答

你在找什么叫关键帧。

这是以下示例中的代码。

@keyframes zoom { 
0% { transform:scale(1,1); } 
50% { transform:scale(1.2,1.2); } 
100% { 
    transform:scale(1,1); 
} 
}

的CSS变换具有可以BR运行“逐帧”，在上述特性，我们希望该图片以通过在x和y轴的因子1.2的时候进行缩放动画的50％已经通过。我们从无变焦开始，放大20％，然后回到原始状态。

这里是我们如何添加到类：

animation: zoom 30s infinite;

只是添加到您的类，它会运行。有更多的参数，但对于不熟悉的人来说，这会变得复杂，因此，这是一个简单的例子。

在这里，在行动

http://codepen.io/damianocel/pen/QyqRgw

我不知道是否可以发布链接到教程，我认为只是在wc3或mdn上查找它是不是很初学者友好。 –

如何制作背景图像缓慢放大和缩小

相关推荐