将动画添加到 body 标记中的背景图像属性：分步指南

Question

我在样式标签中使用背景图像。

<style>
body {
 background-image: url("img.jpg");
 background-size: cover;
 transition: background-image 4s linear;
 }
</style>

我希望图像淡入，而无需在页面上添加单独的 div。可以实现这个目标吗？

Answer 1

是的，这是可能的。您可以这样做。

@keyframes mymove {
     from {
      /* background: white; */     
     }
     to {
      background: url("https://www.shutterstock.com/image-photo/welded-metal-chain-various-rigging-260nw-2238426561.jpg");
       }
}
body {        
        animation: mymove 2s infinite;
      }

Answer 2

这是一个仅使用 CSS 的方法。但是，有一个警告，CSS 无法等待事件，因此它无法知道整个网站何时加载。

相反，在此代码段中，它会等待 1 秒，然后开始引入位于主体的 before 伪元素上的背景图像。

body {
  width: 100vw;
  height: 100vh;
  /*just for demo */
  position: relative;
}

body::before {
  background-image: url(https://picsum.photos/id/1015/1024/768);
  background-size: cover;
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: 0;
  animation: fadein 5s 1 1s linear forwards;
}

@keyframes fadein {
  to {
    opacity: 1;
  }
}

Hello, this is some text in the body. It will be seen even before the background starts to fade in.