Mengapa Animasi Imej Latar Belakang CSS3 Saya Tidak Berfungsi?

Menukar Imej Latar Belakang dengan Animasi CSS3

Soalan ini menangani isu di mana animasi imej latar belakang halaman web tidak berfungsi dengan betul. Kod CSS yang diberikan nampaknya berstruktur dengan betul, tetapi animasi tidak digunakan pada elemen.

Penyelesaian

Penyelesaian yang dikemas kini untuk 2020 melibatkan memanfaatkan peraturan @keyframes dengan cara yang sedikit berbeza. Berikut ialah kod yang dikemas kini:

#mydiv {
  animation: changeBg 1s infinite;
  width: 143px;
  height: 100px;
}

@keyframes changeBg {
  0%, 100% {
    background-image: url("https://i.sstatic.net/YdrqG.png");
  }
  25% {
    background-image: url("https://i.sstatic.net/2wKWi.png");
  }
  50% {
    background-image: url("https://i.sstatic.net/HobHO.png");
  }
  75% {
    background-image: url("https://i.sstatic.net/3hiHO.png");
  }
}

Kod HTML

Untuk menggunakan animasi, kod HTML hendaklah mengandungi:

<div>

Penjelasan

Kod yang dikemas kini ini mentakrifkan animasi bingkai utama bernama changeBg dengan imej latar belakang yang berbeza pada bingkai utama tertentu. Animasi itu kemudiannya digunakan pada elemen #mydiv, menyebabkan ia menukar imej latar belakangnya dengan lancar dari semasa ke semasa.

Atas ialah kandungan terperinci Mengapa Animasi Imej Latar Belakang CSS3 Saya Tidak Berfungsi?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!