Question

我想在我的网页上添加更多互动元素。

我之前在某个网站上看到的是，背景图片会慢慢缩小并退回。所以它看起来更像是一个生物。

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

我还认为使用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>

目标是让背景图像慢慢放大并退出。喜欢呼吸。

Answer 1

主要有2种不同的方式，使用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; }的开始。

Stack snippet

＆＃13;

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

＆＃13;

transition

＆＃13;

这是另一个使用: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); }。

Stack snippet

＆＃13;

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

＆＃13;

int firstVisibleItem = listView.getFirstVisiblePosition();
View view = chatList.getChildAt(0);
int pos = (view == null ? 0 : view.getBottom());
// swap cursor to reload the list
listView.setSelectionFromTop(firstVisibleItem + addedItemsCount + 1, pos);

＆＃13;

Answer 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

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

<div></div>

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

3 个答案: