Comment puis-je générer dynamiquement des valeurs de rotation d'images clés WebKit à l'aide de JavaScript ?

Génération dynamique de valeurs d'images clés Webkit à l'aide de JavaScript

Vous essayez d'incorporer des nombres aléatoires générés par JavaScript dans la rotation de l'animation d'images clés CSS. Cela ne peut pas être fait directement car CSS ne reconnaît pas les variables JavaScript.

Pour y parvenir, vous devez créer ou modifier dynamiquement des règles CSS via JavaScript et les insérer dans le modèle d'objet CSS. Voici la syntaxe corrigée :

function setRotationTransform(element, startRotation, endRotation) {
  var rotationCSS = `@-webkit-keyframes rotate {
    0% {-webkit-transform: rotate(${startRotation}deg);}
    100% {-webkit-transform: rotate(${endRotation}deg);}
  }`;

  // Insert the generated CSS rules into the CSSOM
  var styleElement = document.createElement('style');
  styleElement.type = 'text/css';
  styleElement.innerHTML = rotationCSS;
  document.head.appendChild(styleElement);

  // Apply the generated keyframe animation to the element
  element.style.animation = 'rotate 5s infinite alternate ease-in-out';
}

Pour appliquer cette méthode, vous aurez besoin des étapes suivantes :

1. Créez un générateur de nombres aléatoires en JavaScript.
2. Utilisez la fonction setRotationTransform() pour générer dynamiquement les règles d'images clés CSS en utilisant les nombres aléatoires.
3. Insérez les règles CSS générées dans le CSSOM.
4. Appliquez l'animation de rotation à l'élément cible en utilisant element.style.animation = 'rotate 5s infinite alternate easy-in-out';.

Cette approche vous permet de mettez à jour dynamiquement les valeurs des images clés et appliquez-les à vos éléments CSS, ce qui entraîne des rotations dynamiques basées sur les nombres aléatoires générés par 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!