Bagaimanakah Anda Boleh Mencipta Animasi CSS Dinamik @-Keyframe?

Penciptaan Animasi CSS Dinamik @-Keyframe

Dalam bidang pembangunan web, penciptaan dinamik animasi CSS @keyframes boleh menjadi sesuatu yang berharga alat. Keperluan ini timbul apabila anda memerlukan animasi tersuai dengan parameter tertentu, seperti keupayaan untuk berhenti pada kedudukan tertentu.

Untuk mencapainya, anda boleh menyuntik gaya CSS secara dinamik ke dalam halaman web anda. Kaedah ini membolehkan anda mengatasi gaya sedia ada dan mengelakkan beban perpustakaan tambahan yang tidak perlu.

Penyelesaian:

Laksanakan kod berikut:

var style = document.createElement('style');
style.type = 'text/css';
var keyFrames = `
@-webkit-keyframes spinIt {
    100% {
        -webkit-transform: rotate(A_DYNAMIC_VALUE);
    }
}
@-moz-keyframes spinIt {
    100% {
        -webkit-transform: rotate(A_DYNAMIC_VALUE);
    }
}
`;
style.innerHTML = keyFrames.replace(/A_DYNAMIC_VALUE/g, "180deg");
document.getElementsByTagName('head')[0].appendChild(style);

Coretan kod ini mencipta elemen, menambahkannya pada kepala dokumen dan menyuntik peraturan CSS @keyframes secara dinamik. Anda kemudiannya boleh menggunakan style.innerHTML untuk menggantikan pemegang tempat "A_DYNAMIC_VALUE" dengan nilai henti yang diingini untuk animasi anda.

Atas ialah kandungan terperinci Bagaimanakah Anda Boleh Mencipta Animasi CSS Dinamik @-Keyframe?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!