Wie kann ich WebKit-Keyframe-Rotationswerte mithilfe von JavaScript dynamisch generieren?

Dynamisches Generieren von Webkit-Keyframe-Werten mithilfe von JavaScript

Sie versuchen, von JavaScript generierte Zufallszahlen in die Drehung der CSS-Keyframe-Animation zu integrieren. Dies ist nicht direkt möglich, da CSS keine JavaScript-Variablen erkennt.

Um dies zu erreichen, müssen Sie CSS-Regeln dynamisch über JavaScript erstellen oder ändern und sie in das CSS-Objektmodell einfügen. Hier ist die korrigierte Syntax:

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';
}

Um diese Methode anzuwenden, benötigen Sie die folgenden Schritte:

1. Erstellen Sie einen Zufallszahlengenerator in JavaScript.
2. Verwenden Sie die Funktion setRotationTransform(), um die CSS-Keyframe-Regeln mithilfe der Zufallszahlen dynamisch zu generieren.
3. Fügen Sie die generierten CSS-Regeln ein in das CSSOM.
4. Wenden Sie die Rotationsanimation auf das Zielelement an, indem Sie element.style.animation = 'rotate 5s unendlich alternatives Easy-in-out'; verwenden.

Dieser Ansatz ermöglicht Sie können die Keyframe-Werte dynamisch aktualisieren und auf Ihre CSS-Elemente anwenden, was zu dynamischen Rotationen basierend auf den von JavaScript generierten Zufallszahlen führt.

Das obige ist der detaillierte Inhalt vonWie kann ich WebKit-Keyframe-Rotationswerte mithilfe von JavaScript dynamisch generieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!