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

Question

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

Tho*_*nen 3 html css css3 css-transitions css-animations

我想在我的网页上加入一些更具互动性的元素.

我之前在一些网站上看到过的是,背景图像变焦缓慢而退出.所以它看起来更像是一个生物.

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

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

Run Code Online (Sandbox Code Playgroud)

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

Answer 1

LGS*_*Son 11

主要有两种不同的方式,使用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;
}

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	10 年，5 月前
查看次数：	11889 次
最近记录：	7 年，2 月前