如何使用 JavaScript 動態產生 WebKit 關鍵影格旋轉值？

使用JavaScript 動態產生Webkit 關鍵影格值

您正在嘗試將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 動態產生 WebKit 關鍵影格旋轉值？的詳細內容。更多資訊請關注PHP中文網其他相關文章！