堆栈内存溢出
  简体   繁体   English

如何使用 css 为身体的背景图像设置动画

[英]How can I animate Background Image of body wth css

 原文  2020-09-22 05:52:44  5   2    html/ css/ css-animations/ web-deployment/ animista

问题描述

below is my css animation(actually copied from Animista)下面是我的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>

I need to apply this to body background image我需要将此应用于身体背景图像

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

when I try to apply the animation everything inside the body is moving except the background image, please help me out here I am all new to these.当我尝试应用动画时，除了背景图像之外，身体内部的所有内容都在移动，请在这里帮助我，我对这些都不熟悉。

2 个解决方案

解决方案1
 1  2020-09-22 06:08:51

Problem: you are changing the element-size not only the background.问题：您不仅要更改背景，还要更改元素大小。 Whatever you do, changing the size of the body is mostly a pretty bad idea in a website.无论你做什么，改变身体的大小在网站上都是一个非常糟糕的主意。

So i give you 2 solutions, second one wont look as smooth tho sadly所以我给你两个解决方案，第二个看起来不会那么顺利，但遗憾的是

So here is one example of a solution for your problem, i just made the animation go back and forth forever so you can see it better.所以这是解决您问题的一个示例，我只是让动画永远来回循环，以便您可以更好地看到它。 Snippet: Workaround by setting up a div as background and another div as the content-area:代码段：通过将一个 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>
Solution 2: When you have to apply the background image to the body and still want an animation: 解决方案 2：当您必须将背景图像应用到 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

As far as I know you can't add animation to background image.据我所知，您无法向背景图像添加动画。 You have to simulate the way background image works and then add the animation to that image.您必须模拟背景图像的工作方式，然后将动画添加到该图像。 I used CSS positioning to accomplish this.我使用 CSS 定位来实现这一点。 I didn't add your animations completely but you can add it as you like.我没有完全添加您的动画，但您可以随意添加。

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

and the body tag will be like:和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>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何在 css 中平滑悬停时为背景图像大小设置动画？ - How do I animate background image size on hover smoothly in css? CSS：我不能将身体内容置于背景图像中心 - CSS: I can't center the body content in the background image 如何在 CSS 中为背景图像设置动画？ - How to animate background-image in CSS? 如何为背景图像的不透明度设置动画？ - How can I do to animate opacity of an background image? 如何使用jQuery和/或css在td中为此图像设置动画？ - How can I animate this image in a td using jQuery and/or css? 我怎样才能放入全身背景色CSS - how can i put in all body background color css 如何使用 CSS 设置背景图像？ - How can i set a background image with CSS? 如何设置身体背景的图像不透明度 - How can I set the image opacity for body background 我怎样才能使背景图像适应？ - how can i make the background image for <body> adapt? 如何使用body标签将svg背景图像制作成？ - How can I make an svg a background image with the body tag?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM