如何使用 JavaScript 动态生成 W​​ebKit 关键帧旋转值？

使用 JavaScript 动态生成 W​​ebkit 关键帧值

您正在尝试将 JavaScript 生成的随机数合并到 CSS 关键帧动画旋转中。这不能直接完成，因为 CSS 无法识别 JavaScript 变量。

要实现此目的，您需要通过 JavaScript 动态创建或修改 CSS 规则并将其插入到 CSS 对象模型中。以下是更正后的语法：

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

要应用此方法，您需要执行以下步骤：

1. 在 JavaScript 中创建随机数生成器。
2. 使用setRotationTransform() 函数使用随机数动态生成 CSS 关键帧规则。
3. 插入生成的将 CSS 规则写入 CSSOM。
4. 使用 element.style.animation = 'rotate 5s 无限交替缓入出'; 将旋转动画应用到目标元素。

This方法允许您动态更新关键帧值并将它们应用到 CSS 元素，从而根据 JavaScript 生成的随机数进行动态旋转。

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