Bagaimana untuk menghidupkan imej latar belakang dengan betul dengan CSS3?

Animasi Latar Belakang dengan CSS3

Apabila melaksanakan animasi dengan CSS3, seseorang mungkin menghadapi cabaran seperti kekurangan tindak balas dalam menukar imej latar belakang. Untuk menyelesaikan isu ini, adalah penting untuk memahami sintaks dan teknik yang betul.

Kod yang disediakan melibatkan penentuan animasi bernama "ujian" menggunakan peraturan @-webkit-keyframes, yang menentukan imej latar belakang pada pelbagai peringkat animasi tersebut. Walau bagaimanapun, masalahnya terletak pada cara sifat animasi digunakan pada elemen div.

Penyelesaian Kemas Kini

Penyelesaian yang dikemas kini menunjukkan cara menganimasikan perubahan imej latar belakang dengan betul menggunakan sifat animasi. Kod CSS yang dikemas kini di bawah:

#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");
  }
}

Perbezaan Utama dalam Pendekatan

1. Harta Animasi: Daripada menggunakan -webkit awalan -sifat nama-animasi, kod yang dikemas kini menggunakan sifat animasi moden untuk penyemak imbas silang keserasian.
2. Tempoh Animasi dan Kiraan Lelaran: Kod yang dikemas kini menetapkan tempoh animasi kepada 1 saat dan kiraan lelaran animasi kepada tak terhingga untuk memastikan gelung animasi yang lancar.
3. URL Imej Latar Belakang: Kod termasuk URL khusus untuk setiap latar belakang imej.
4. ID Elemen: Kod yang dikemas kini memperkenalkan ID "mydiv" untuk elemen sasaran bagi memastikan penggayaan dan animasi tertentu.

Dengan melaksanakan ini berubah, imej latar belakang kini harus bernyawa seperti yang dikehendaki. Penyelesaian ini selaras dengan piawaian penyemak imbas moden dan memberikan pengalaman animasi yang lebih konsisten dan boleh dipercayai.

Atas ialah kandungan terperinci Bagaimana untuk menghidupkan imej latar belakang dengan betul dengan CSS3?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!