如何使用 css 为 body 的背景图片设置动画

Question

下面是我的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 背景图片

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 中的所有内容都在移动，除了背景图像，请帮助我，我对这些都是新的。

Answer 1

问题：您不仅要更改 element-size 背景。无论您做什么，在网站中更改正文的大小基本上都是一个非常糟糕的主意。

所以我给你 2 个解决方案，遗憾的是第二个看起来不那么顺利

这里是解决您的问题的一个示例，我只是让动画永远来回移动，这样您就可以看得更清楚。代码段：解决方法是将 div 设置为背景，将另一个 div 设置为 content-area：

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

解决方案 2：当您必须将背景图像应用到主体但仍需要动画时：

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

Answer 2

据我所知，您不能为背景图片添加动画。您必须模拟背景图像的工作方式，然后将动画添加到该图像。我使用 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 为 body 的背景图片设置动画

How can I animate Background Image of body wth css

html

css

web-deployment

css-animations

animista