Fatal编程技术网
  • html/
  • Html 如何使背景图像缓慢放大和缩小

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

html css

Html 如何使背景图像缓慢放大和缩小,html,css,css-transitions,css-animations,Html,Css,Css Transitions,Css Animations,我想在我的网页中加入更多的互动元素 我以前在一些网站上看到的是，背景图像缓慢地放大，然后又缩小。所以它看起来更像一个生物 我一直在网上和这里搜索。但是我不知道这项技术是怎么做到的，我也不知道这种效果的名字 我还认为，用一些CSS3和HTML5实现这一点应该相当容易 问题是: 这种效果有名字吗？它叫什么 可以用纯CSS实现吗 网上有没有关于基本知识的示例 以下是我心目中的html： <!DOCTYPE html> <html> <head>

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

我以前在一些网站上看到的是，背景图像缓慢地放大，然后又缩小。所以它看起来更像一个生物

我一直在网上和这里搜索。但是我不知道这项技术是怎么做到的，我也不知道这种效果的名字

我还认为，用一些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>


测试页
身体{
背景图像：url（“http://wallpapercave.com/wp/LXR5gFx.png");
背景尺寸：100%自动；
}
目标是让背景图像缓慢放大和缩小。就像呼吸一样。

主要有两种不同的方式，使用
动画
或
转换

动画
通常在希望某个东西一直运行的情况下会更好，而
过渡
对于悬停效果更有效

下面是使用
动画
的开始

堆栈片段



html，正文{
身高：100%；
保证金：0
}
@关键帧呼吸{
0%{背景大小：100%自动；}
50%{背景大小：140%自动；}
100%{背景大小：100%自动；}
}
#bkg{
宽度：100%；
身高：100%；
动画：线性无限；
背景：url（“http://wallpapercave.com/wp/LXR5gFx.png）居中不重复；
}


您要查找的是所谓的关键帧

这是下面示例中的代码


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


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

这里是代码笔的链接


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


    

  • 它将使用GPU渲染元素
    • 

  • 它将在FPS方面表现得更好
    • 

  • 设置
    主体
    背景动画将导致在每一帧上重新绘制整个页面
    • 


此外，设置
背景位置的动画将创建一种杂耍效果，因为浏览器将尝试将位置四舍五入到最近的像素

另一方面，使用
transform:scale（）



@关键帧呼吸{
从{
变换：比例（1）；
}
到{
变换：比例（1.05）
}
}
div{
宽度：100vw；
高度：100vh；
动画：呼吸2秒缓进缓出交替无限；
背景：url（“https://www.placecage.com/800/600");
背景尺寸：封面；
}
身体{
保证金：0；
}


使用Css可以轻松完成。请使用浏览器中的开发工具。提示：了解css中的：hover。我有点熟悉：hover。但是背景应该一直在移动。即使没有涉及鼠标活动，您也可以使用
背景大小
属性来实现动画，如这里的答案所示，但这是不可取的，因为背景大小是一个视觉属性，因此任何更改都会导致重绘，从而影响性能。一个更好的方法是使用
transform
，就像在这个答案中一样-（第二个片段）。我认为答案中的动画也非常接近你想要的。要求我们推荐一种技术或查找一本书、工具、软件库、教程或其他非现场资源的问题是堆栈溢出的主题。谢谢！这节省了很多时间！它就像一个符咒！因此，我正在寻找的css被称为。动画：呼吸：：）我不确定是否可以发布教程链接，我认为仅仅在wc3或mdn上查找它对初学者不是很友好。