Tambahkan animasi pada sifat imej latar belakang dalam teg badan: panduan langkah demi langkah

Question

Saya menggunakan imej latar belakang dalam tag gaya. Saya mahu imej pudar tanpa menambah div berasingan pada halaman . Adakah matlamat ini boleh dicapai?

P粉940538947 · Answer

Ya, boleh. Anda boleh melakukan ini.

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

P粉541551230 · Answer

Ini adalah kaedah CSS sahaja. Walau bagaimanapun, terdapat kaveat, CSS tidak boleh menunggu acara, jadi ia tidak mempunyai cara untuk mengetahui bila keseluruhan tapak telah dimuatkan.

Sebaliknya, dalam coretan ini, ia menunggu 1 saat sebelum mula memperkenalkan imej latar belakang yang terletak pada badan sebelum unsur pseudo.

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.