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

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

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

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

我也认为这应该很容易用一些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>

目标是让背景图像缓慢放大和缩小。就像在呼吸一样。

主要有两种不同的方法，使用 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>

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

堆栈代码段

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

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

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

这是以下示例中的代码。

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

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

这里是代码笔的链接

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

您希望将单独的元素与 transform() 一起使用，原因有三：

它将使用 GPU 来渲染元素
在FPS方面，它将更加高性能
对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;
}

<div></div>

相关内容

最新更新

热门标签：