Comment puis-je contrôler dynamiquement la rotation des images clés WebKit avec JavaScript ?

Définir dynamiquement les valeurs de rotation des images clés du Webkit à l'aide de variables JavaScript

Vous souhaitez incorporer des variables JavaScript dans des images clés CSS pour faire pivoter les éléments de manière aléatoire. Malheureusement, CSS ne peut pas interpréter directement les variables JavaScript.

Créer des règles CSS de manière dynamique

Pour atteindre votre objectif, vous devez créer ou modifier les règles CSS en JavaScript et les ajouter au modèle d'objet CSS (CSSOM). Cette approche implique :

• Créer une nouvelle animation d'image clé et l'ajouter au CSSOM.
• Écraser une animation d'image clé existante avec des valeurs différentes.

Exemple de mise en œuvre

Considérons l'exemple suivant qui écrase une image clé de « rotation » existante animation :

<script>
  // Generate random rotation values
  var dogValue = "20deg";
  var minValue = -360;
  var maxValue = 360;

  // Create a new keyframe rule
  var styleElement = document.createElement('style');
  document.head.appendChild(styleElement);

  // Define the new keyframes
  var keyframes = `
    @-webkit-keyframes rotate {
      0% {-webkit-transform: rotate(${minValue}deg);}
      100% {-webkit-transform: rotate(${maxValue}deg);}
    }
  `;

  // Overwrite the existing keyframe animation
  styleElement.innerHTML = keyframes;

  // Apply the new animation to the target element
  var dogElement = document.getElementById('dog');
  dogElement.style.animation = "rotate 5s infinite alternate ease-in-out";
</script>

Ce code crée une nouvelle animation d'image clé "rotation" avec des valeurs de rotation aléatoires et l'ajoute au CSSOM. Il écrase ensuite l'animation « rotation » existante appliquée à l'élément « #dog ».

En utilisant cette technique, vous pouvez modifier dynamiquement les valeurs des images clés CSS à l'aide de variables JavaScript.

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!