Bagaimanakah Saya Boleh Menjana Nilai Putaran Kerangka Kunci WebKit Secara Dinamik Menggunakan JavaScript?

Menjana Nilai Kerangka Kunci Webkit Secara Dinamik Menggunakan JavaScript

Anda cuba untuk memasukkan nombor rawak yang dijana oleh JavaScript ke dalam animasi rangka kunci CSS berputar. Ini tidak boleh dilakukan secara langsung kerana CSS tidak mengenali pembolehubah JavaScript.

Untuk mencapai ini, anda perlu mencipta atau mengubah suai peraturan CSS secara dinamik melalui JavaScript dan memasukkannya ke dalam Model Objek CSS. Berikut ialah sintaks yang diperbetulkan:

function setRotationTransform(element, startRotation, endRotation) {
  var rotationCSS = `@-webkit-keyframes rotate {
    0% {-webkit-transform: rotate(${startRotation}deg);}
    100% {-webkit-transform: rotate(${endRotation}deg);}
  }`;

  // Insert the generated CSS rules into the CSSOM
  var styleElement = document.createElement('style');
  styleElement.type = 'text/css';
  styleElement.innerHTML = rotationCSS;
  document.head.appendChild(styleElement);

  // Apply the generated keyframe animation to the element
  element.style.animation = 'rotate 5s infinite alternate ease-in-out';
}

Untuk menggunakan kaedah ini, anda memerlukan langkah berikut:

1. Buat penjana nombor rawak dalam JavaScript.
2. Gunakan fungsi setRotationTransform() untuk menjana peraturan kerangka kunci CSS secara dinamik menggunakan nombor rawak.
3. Masukkan yang dijana Peraturan CSS ke dalam CSSOM.
4. Gunakan animasi putar pada elemen sasaran menggunakan element.style.animation = 'putarkan 5s kemudahan masuk-keluar ganti tak terhingga';.

Ini pendekatan membolehkan anda mengemas kini nilai kerangka kunci secara dinamik dan menerapkannya pada elemen CSS anda, menghasilkan putaran dinamik berdasarkan nombor rawak yang dijana oleh JavaScript.

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