Kerosakan Doom Flash pada Tatal

Perpustakaan JavaScript ini, yang diilhamkan oleh Doom Permainan Klasik, menambah kesan kilat kerosakan gaya retro yang menyeronokkan ke pengalaman menatal laman web anda. Kesannya dengan bijak meniru skrin merah ikonik Doom apabila mengambil kerosakan, mewujudkan interaksi lidah "Doom Scrolling" lidah.

Contoh ini memberi tumpuan kepada animasi kerosakan teras menggunakan HTML dan CSS. Overlay skrin penuh dicipta:

<div id="doom-damage"></div>

 #Doom-damage {
  latar belakang warna: merah;
  Kedudukan: Tetap;
  Atas: 0;
  Kiri: 0;
  Lebar: 100%;
  Ketinggian: 100%;
  Kelegapan: 0;
  Pointer-events: Tiada; / * Menghalang gangguan dengan interaksi halaman */
}

Perhatikan opacity: 0 dan pointer-events: none gaya. Overlay pada mulanya tidak kelihatan dan tidak menghalang interaksi pengguna. Menggunakan opacity untuk animasi adalah lebih cekap daripada memaparkan display , mengelakkan masalah prestasi yang berkaitan dengan perubahan paparan semasa animasi.

Flash kerosakan dicetuskan dengan menambahkan kelas:

 const kerosakan = document.getElementById ("Doom-Damage");

fungsi doomtakedamage () {
  kerosakan.classlist.add ("do-damage");
  setTimeout (() => {
    kerosakan.classlist.remove ("do-damage");
  }, 400);
}

Kelas .do-damage menggunakan animasi CSS:

 .do-damage {
  latar belakang warna: merah;
  Animasi: 0.4s Doom-Ramage ke hadapan;
}

@KeyFrames Doom-Damage {
  0% {Opacity: 1; }
  100% {opacity: 0; }
}

Ini mewujudkan kilat merah serta-merta diikuti oleh pudar yang lancar.

Sekeping teka -teki terakhir (tidak ditunjukkan di sini tetapi termasuk dalam codepen yang dipautkan) melibatkan pendengar acara tatal yang memanggil doomTakeDamage() pada selang tatal tertentu, mewujudkan kesan dinamik "Doom Scrolling". Kod penuh tersedia dalam codepen yang disediakan untuk pelaksanaan lengkap.

Atas ialah kandungan terperinci Kerosakan Doom Flash pada Tatal. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!