Bagaimanakah Saya Boleh Mengawal Putaran Kerangka Kunci WebKit Secara Dinamik dengan JavaScript?

Tetapkan Nilai Putaran Bingkai Kunci Webkit Secara Dinamik Menggunakan Pembolehubah JavaScript

Anda menyasarkan untuk memasukkan pembolehubah JavaScript ke dalam bingkai kunci CSS untuk memutarkan elemen secara rawak. Malangnya, CSS tidak boleh mentafsir pembolehubah JavaScript secara langsung.

Mencipta Peraturan CSS Secara Dinamik

Untuk mencapai matlamat anda, anda perlu mencipta atau mengubah suai peraturan CSS dalam JavaScript dan menambahkannya kepada Model Objek CSS (CSSOM). Pendekatan ini melibatkan:

• Membuat animasi bingkai kunci baharu dan menambahkannya pada CSSOM.
• Menimpa animasi bingkai kunci sedia ada dengan nilai yang berbeza.

Contoh Pelaksanaan

Pertimbangkan contoh berikut yang menimpa animasi bingkai kunci "putar" sedia ada:

<script>
  // Generate random rotation values
  var dogValue = "20deg";
  var minValue = -360;
  var maxValue = 360;

  // Create a new keyframe rule
  var styleElement = document.createElement('style');
  document.head.appendChild(styleElement);

  // Define the new keyframes
  var keyframes = `
    @-webkit-keyframes rotate {
      0% {-webkit-transform: rotate(${minValue}deg);}
      100% {-webkit-transform: rotate(${maxValue}deg);}
    }
  `;

  // Overwrite the existing keyframe animation
  styleElement.innerHTML = keyframes;

  // Apply the new animation to the target element
  var dogElement = document.getElementById('dog');
  dogElement.style.animation = "rotate 5s infinite alternate ease-in-out";
</script>

Kod ini mencipta animasi bingkai kunci "putar" baharu dengan nilai putaran rawak dan menambahkannya pada CSSOM. Ia kemudian menimpa animasi "putar" sedia ada yang digunakan pada elemen "#dog".

Dengan menggunakan teknik ini, anda boleh mengubah suai nilai kerangka kunci CSS secara dinamik menggunakan pembolehubah JavaScript.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengawal Putaran Kerangka Kunci WebKit Secara Dinamik dengan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!