Wie kann ich die WebKit-Keyframe-Rotation mit JavaScript dynamisch steuern?

Webkit-Keyframe-Rotationswerte mithilfe von JavaScript-Variablen dynamisch festlegen

Sie möchten JavaScript-Variablen in CSS-Keyframes integrieren, um Elemente zufällig zu drehen. Leider kann CSS JavaScript-Variablen nicht direkt interpretieren.

CSS-Regeln dynamisch erstellen

Um Ihr Ziel zu erreichen, müssen Sie die CSS-Regeln in JavaScript erstellen oder ändern und hinzufügen zum CSS Object Model (CSSOM). Dieser Ansatz umfasst:

• Erstellen einer neuen Keyframe-Animation und Hinzufügen zum CSSOM.
• Überschreiben einer vorhandenen Keyframe-Animation mit anderen Werten.

Beispielimplementierung

Betrachten Sie das folgende Beispiel, das eine vorhandene „Drehung“ überschreibt Keyframe-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>

Dieser Code erstellt eine neue „Rotate“-Keyframe-Animation mit zufälligen Rotationswerten und fügt sie dem CSSOM hinzu. Anschließend wird die vorhandene „Rotate“-Animation überschrieben, die auf das „#dog“-Element angewendet wird.

Mit dieser Technik können Sie CSS-Keyframe-Werte mithilfe von JavaScript-Variablen dynamisch ändern.

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