如何使用 css 为身体的背景图像设置动画
[英]How can I animate Background Image of body wth css
问题描述
下面是我的css动画（实际上是从 Animista 复制的）
@-webkit-keyframes kenburns-top { 0% { -webkit-transform: scale(1) translateY(0); transform: scale(1) translateY(0); -webkit-transform-origin: 50% 16%; transform-origin: 50% 16%; } 100% { -webkit-transform: scale(1.25) translateY(-15px); transform: scale(1.25) translateY(-15px); -webkit-transform-origin: top; transform-origin: top; } } @keyframes kenburns-top { 0% { -webkit-transform: scale(1) translateY(0); transform: scale(1) translateY(0); -webkit-transform-origin: 50% 16%; transform-origin: 50% 16%; } 100% { -webkit-transform: scale(1.25) translateY(-15px); transform: scale(1.25) translateY(-15px); -webkit-transform-origin: top; transform-origin: top; } } body { background: url(https://images.pexels.com/photos/934062/pexels-photo-934062.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940); background-size: cover; background-position: center; color: white; font-family: "Open Sans", sans-serif !important; }
<body></body>
我需要将此应用于身体背景图像
body {
background: url(https://images.pexels.com/photos/934062/pexels-photo-934062.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
background-size: cover;
background-position: center;
color: white;
font-family: "Open Sans", sans-serif !important;
}
当我尝试应用动画时，除了背景图像之外，身体内部的所有内容都在移动，请在这里帮助我，我对这些都不熟悉。
2 个解决方案
解决方案1
1 2020-09-22 06:08:51
问题：您不仅要更改背景，还要更改元素大小。 无论你做什么，改变身体的大小在网站上都是一个非常糟糕的主意。
所以我给你两个解决方案，第二个看起来不会那么顺利，但遗憾的是
所以这是解决您问题的一个示例，我只是让动画永远来回循环，以便您可以更好地看到它。 代码段：通过将一个 div 设置为背景并将另一个 div 设置为内容区域的解决方法：
@-webkit-keyframes kenburns-top { 0% { -webkit-transform: scale(1) translateY(0); transform: scale(1) translateY(0); -webkit-transform-origin: 50% 16%; transform-origin: 50% 16%; } 100% { -webkit-transform: scale(1.25) translateY(-15px); transform: scale(1.25) translateY(-15px); -webkit-transform-origin: top; transform-origin: top; } } body { width: 100vw; height: 100vh; background-color: red; color: white; font-family: "Open Sans", sans-serif !important; } /*Just the background-image*/ .content-background { position: absolute; z-index: -1; width: 100%; height: 100%; background: url(https://images.pexels.com/photos/934062/pexels-photo-934062.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940); background-size: cover; background-position: center; animation-name: kenburns-top; animation-duration: 4s; animation-iteration-count: infinite; animation-direction: alternate-reverse; } /*The div where the real content is in*/ .content { width: 100%; height: 100%; /*color and opacity just to make it visible to better explain*/ opacity: 0.2; background-color: blue; }
<body> <div class="content-background"> </div> <div class="content"> <h1>As you can see now only the image changes, body and content stay</h1> </div> </body>
@-webkit-keyframes kenburns-top { 0% { /*manipulate background-size with the animation isntead*/ background-size: 50% 50%; } 100% { background-size: 100% 100%; } } body { width: 100vw; height: 100vh; background-color: red; color: white; font-family: "Open Sans", sans-serif !important; background: url(https://images.pexels.com/photos/934062/pexels-photo-934062.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940); background-position: center; /*removed background-size*/ /*add no-repeat rule*/ background-repeat: no-repeat; animation-name: kenburns-top; animation-duration: 4s; animation-iteration-count: infinite; animation-timing-function: linear; animation-direction: alternate-reverse; } /*The div where the real content is in*/ .content { width: 100%; height: 100%; /*color and opacity just to make it visible to better explain*/ opacity: 0.2; background-color: blue; }
<body> <div class="content"> <h1>As you can see now only the image changes,content stays</h1> </div> </body>解决方案2
1 已采纳 2020-09-22 06:18:42
据我所知，您无法向背景图像添加动画。 您必须模拟背景图像的工作方式，然后将动画添加到该图像。 我使用 CSS 定位来实现这一点。 我没有完全添加您的动画，但您可以随意添加。
CSS :
body {
color: white;
font-family: 'Open Sans', sans-serif !important;
}
#bg-image {
position: fixed;
top: 0;
right: 0;
width: 100%;
height: auto;
z-index: -10;
animation-name: kenburns-top;
animation-duration: 2s;
animation-iteration-count: infinite;
}
@-webkit-keyframes kenburns-top {
0% {
-webkit-transform: scale(1) translateY(0);
transform: scale(1) translateY(0);
-webkit-transform-origin: 50% 16%;
transform-origin: 50% 16%;
}
100% {
-webkit-transform: scale(1.25) translateY(-15px);
transform: scale(1.25) translateY(-15px);
-webkit-transform-origin: top;
transform-origin: top;
}
}
和body 标签将是这样的：
<body>
<img
id="bg-image"
src="https://images.pexels.com/photos/934062/pexels-photo-934062.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
/>
<h1>Web Page</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti eligendi
cupiditate non? Voluptas, in, deserunt quis expedita, laudantium suscipit
ab sint amet quia dolorum illum saepe. Placeat libero enim dicta!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium iure
veritatis eligendi ipsa ad suscipit, quo illum ut rem incidunt eos rerum
iusto repellendus voluptatibus saepe veniam ullam, quod vel?
</p>
</body>
如何在 css 中平滑悬停时为背景图像大小设置动画？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.