如何使背景图像缓慢放大和缩小答案

【问题标题】：How to make a background image zoom in and out slowly如何使背景图像缓慢放大和缩小
【发布时间】：2016-04-30 19:46:48
【问题描述】：

我想在我的网页中加入更多互动元素。

我之前在某些网站上看到的是，背景图片放大缓慢又缩小。让它看起来更像是一个活物。

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

我也认为使用一些 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 可以轻松完成。使用浏览器中的开发工具。提示：了解 :hover in css。
我对 :hover 有点熟悉。但背景应该始终保持移动。即使不涉及鼠标活动
您可以使用background-size 属性实现动画，如答案所示，但不建议这样做，因为背景大小是一种视觉属性，因此任何更改都会导致重绘，从而影响性能。更好的方法是在这个答案中使用transform - stackoverflow.com/questions/34311417/…（第二个sn-p）。我认为该答案中的动画也非常接近您想要的。
要求我们推荐一种技术或查找书籍、工具、软件库、教程或其他场外资源的问题对于 Stack Overflow 来说是题外话

标签： html css css-transitions css-animations

【解决方案1】：

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

animation 通常在人们想要一直运行的情况下会更好，而transition 对于例如悬停效果。

这是使用animation的开始。

堆栈sn-p

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;
}

&lt;div id="bkg"&gt;&lt;/div&gt;

这是另一个使用transition 和:hover。

堆栈sn-p

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

#bkg {
  width: 180px;
  height: 180px;
  position: relative;
  overflow: hidden;
}

#bkg::before {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-image: url("http://wallpapercave.com/wp/LXR5gFx.png");
  background-position: center;
  background-repeat: no-repeat;
  transition: transform .5s linear;
}

#bkg:hover::before{
  transform: scale(1.3);
}

&lt;div id="bkg"&gt;&lt;/div&gt;

【讨论】：

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

【解决方案2】：

您要查找的内容称为关键帧。

这是以下示例中的代码。

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

Css 变换具有可以“逐帧”运行的属性，在上面，我们希望在动画完成 50% 时，图片在 x 和 y 轴上缩放 1.2 倍。我们从不缩放开始，将其缩放 20%，然后回到原始状态。

下面是我们如何将它添加到类中：

animation: zoom 30s infinite;

只需将其添加到您的课程中，它就会运行。还有更多参数，但是对于不熟悉的人来说这会变得很复杂，因此，这是一个简单的示例。

这里是codepen的链接

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

【讨论】：

我不确定是否可以发布教程链接，我认为只是在 wc3 或 mdn 上查找它对初学者不太友好。

【解决方案3】：

您想在 transform() 中使用单独的元素，原因有以下三个：

它将使用 GPU 来渲染元素
FPS 性能会更好more on that
动画body 背景将导致整个页面在每一帧上重新绘制

此外，为background-position 设置动画会产生杂耍效果，因为浏览器会尝试将位置四舍五入到最近的像素。

另一方面，使用transform: scale()，浏览器将使用亚像素渲染定位元素，从而实现更平滑的移动。

@keyframes breath {
  from { 
    transform: scale(1);
  }
  to {
    transform: scale(1.05)
  }
}

div{
  width: 100vw;
  height: 100vh;
  animation: breath 2s ease-in-out alternate infinite;
  background: url("https://www.placecage.com/800/600");
  background-size: cover;
}

body {
  margin: 0;
}

&lt;div&gt;&lt;/div&gt;

【讨论】：