將動畫新增至 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.