如何使用 JavaScript 动态控制 WebKit 关键帧旋转？

使用 JavaScript 变量动态设置 Webkit 关键帧旋转值

您的目标是将 JavaScript 变量合并到 CSS 关键帧中以随机旋转元素。不幸的是，CSS 无法直接解释 JavaScript 变量。

动态创建 CSS 规则

要实现您的目标，您需要在 JavaScript 中创建或修改 CSS 规则并添加它们CSS 对象模型 (CSSOM)。此方法涉及：

• 创建新的关键帧动画并将其添加到 CSSOM。
• 用不同的值覆盖现有的关键帧动画。

示例实现

考虑以下覆盖示例现有的“旋转”关键帧动画：

<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>

此代码创建一个具有随机旋转值的新“旋转”关键帧动画，并将其添加到 CSSOM。然后，它会覆盖应用于“#dog”元素的现有“旋转”动画。

通过利用此技术，您可以使用 JavaScript 变量动态修改 CSS 关键帧值。

以上是如何使用 JavaScript 动态控制 WebKit 关键帧旋转？的详细内容。更多信息请关注PHP中文网其他相关文章！