Bagaimana untuk Membuat Animasi CSS Secara Dinamik dengan '@-Keyframes'?

Mencipta Animasi CSS '@-Keyframe' Secara Dinamik

Untuk mencapai penyesuaian dinamik animasi CSS, anda boleh mencipta dan memasukkan peraturan lembaran gaya pada terbang. Pendekatan ini membolehkan anda mengatasi gaya sedia ada dan mengawal titik akhir animasi berdasarkan nilai yang diterima.

Penyelesaian:

1. Buat gaya elemen:

   var style = document.createElement('style');
   style.type = 'text/css';

2. Bina definisi bingkai utama:

   var keyFrames = '\
   @-webkit-keyframes spinIt {\
       100% {\
           -webkit-transform: rotate(A_DYNAMIC_VALUE);\
       }\
   }\
   @-moz-keyframes spinIt {\
       100% {\
           -webkit-transform: rotate(A_DYNAMIC_VALUE);\
       }\
   }';

3. Ganti pemegang tempat dengan yang dikehendaki sudut:

   style.innerHTML = keyFrames.replace(/A_DYNAMIC_VALUE/g, "180deg");

4. Masukkan gaya ke dalam kepala dokumen:

   document.getElementsByTagName('head')[0].appendChild(style);

Ini akan membuat dan menggunakan animasi CSS secara dinamik dengan sudut putaran yang ditentukan. Anda boleh melaraskan pemegang tempat A_DYNAMIC_VALUE mengikut keperluan untuk berputar berdasarkan nilai yang disediakan pelayan.

Dengan memanfaatkan teknik ini, anda boleh mengoptimumkan prestasi dengan mengelakkan animasi JS asli yang boleh menggunakan sumber CPU yang ketara. Penciptaan peraturan lembaran gaya yang dinamik memberikan fleksibiliti untuk menyesuaikan animasi dengan pantas, meningkatkan pengalaman pengguna tanpa perpustakaan luaran tambahan.

Atas ialah kandungan terperinci Bagaimana untuk Membuat Animasi CSS Secara Dinamik dengan '@-Keyframes'?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!