


Comment puis-je utiliser des variables JavaScript pour définir dynamiquement les valeurs d'images clés WebKit ?
Nov 29, 2024 pm 08:55 PMUtiliser 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!

Article chaud

Outils chauds Tags

Article chaud

Tags d'article chaud

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

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

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

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

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

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

Faire votre première transition Svelte personnalisée

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