如何使用 JavaScript 變數動態設定 WebKit 關鍵影格值？

使用JavaScript 透過變數設定Webkit 關鍵影格值

在嘗試使用JavaScript 中產生的隨機值時，您面臨著一個常見的挑戰CSS 動畫。 JavaScript 變數無法直接注入 CSS 關鍵影格。

相反，您需要透過 JavaScript 動態建立 CSS 規則並將其插入到 CSS 物件模型 (CSSOM) 中。

動態關鍵影格建立

依照下列步驟建立和操作關鍵影格動態：

1. 使用window.document.createElement() 方法建立所需的關鍵影格動畫物件。該物件將用作關鍵影格定義的容器。
2. 使用 keyframes.insertRule() 方法定義實際關鍵影格。此方法採用兩個參數：關鍵影格百分比和該百分比的 CSS 規則。
3. 使用sheet.insertRule() 方法將新建立的關鍵影格動畫插入到 CSSOM 中。

範例

這是一個動態建立和覆蓋現有關鍵影格的範例具有隨機旋轉值的動畫：

用法

您可以使用此函數以隨機值不斷更新旋轉關鍵影格。例如，您可以有一個按鈕，觸發點擊事件來產生新的隨機度數並相應地更新關鍵影格。

請記得將dogValue 替換為隨機產生的度數。

以上是如何使用 JavaScript 變數動態設定 WebKit 關鍵影格值？的詳細內容。更多資訊請關注PHP中文網其他相關文章！