


Comment puis-je utiliser des variables JavaScript pour définir dynamiquement les valeurs d'images clés WebKit ?
Utiliser JavaScript pour définir les valeurs des images clés du kit Web avec des variables
Vous êtes confronté à un défi courant lorsque vous essayez d'utiliser des valeurs aléatoires générées en JavaScript pour Animations CSS. Les variables JavaScript ne peuvent pas être directement injectées dans les images clés CSS.
Au lieu de cela, vous devez créer les règles CSS de manière dynamique via JavaScript et les insérer dans le modèle d'objet CSS (CSSOM).
Dynamique Création d'images clés
Suivez ces étapes pour créer et manipuler des images clés dynamiquement :
- Créez l'objet d'animation d'image clé souhaité à l'aide de la méthode window.document.createElement(). Cet objet servira de conteneur pour vos définitions d'images clés.
- Définissez les images clés réelles à l'aide de la méthode keyframes.insertRule(). Cette méthode prend deux paramètres : le pourcentage d'images clés et les règles CSS pour ce pourcentage.
- Insérez l'animation d'images clés nouvellement créée dans le CSSOM à l'aide de la méthode sheet.insertRule().
Exemple
Voici un exemple qui crée et écrase dynamiquement une animation d'image clé existante avec une rotation aléatoire valeurs :
function createRandomRotation(dogValue) { // Create the keyframe animation object let rotateAnimation = window.document.createElement('style'); // Define the actual keyframes rotateAnimation.innerHTML = ` @-webkit-keyframes rotate { 0% {-webkit-transform: rotate(-${dogValue});} 100% {-webkit-transform: rotate(${dogValue});} } #dog { -webkit-animation: rotate 5s infinite alternate ease-in-out; } `; // Insert the keyframe animation into the CSSOM window.document.head.appendChild(rotateAnimation); }
Utilisation
Vous pouvez utiliser cette fonction pour mettre à jour continuellement les images clés de rotation avec des valeurs aléatoires. Par exemple, vous pourriez avoir un bouton qui déclenche un événement de clic pour générer de nouveaux degrés aléatoires et mettre à jour les images clés en conséquence.
N'oubliez pas de remplacer dogValue par la valeur de votre degré générée aléatoirement.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Outils d'IA chauds

Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool
Images de déshabillage gratuites

Clothoff.io
Dissolvant de vêtements AI

AI Hentai Generator
Générez AI Hentai gratuitement.

Article chaud

Outils chauds

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Sujets chauds

Créez un formulaire de contact JavaScript avec le cadre Smart Forms

Ajout d'ombres de boîte aux blocs et éléments WordPress

Créer un éditeur de texte en ligne avec l'attribut satisfaistable

Demystifier les lecteurs d'écran: formulaires accessibles et meilleures pratiques

Faire votre première transition Svelte personnalisée

Comparaison des 5 meilleurs constructeurs de formulaires PHP (et 3 scripts libres)

Téléchargement de fichiers avec Multer dans Node.js et Express
