如何使用 JavaScript 變數控制 WebKit 關鍵影格？

使用 Javascript 變數控制 Webkit 關鍵影格

本文解決了使用 JavaScript 變數控制 Webkit 關鍵影格內的值的查詢。雖然直接將變數插入 CSS 是不可行的，但有其他方法可以實現這一點。

在提供的場景中，會產生隨機數並用作關鍵影格內的旋轉值。然而，簡單地用變數代替旋轉值在 CSS 中是行不通的。

相反，解決方案在於使用 JavaScript 以程式設計方式建立 CSS 規則並將其插入到 CSS 物件模型 (CSSOM) 中。一種方法是根據生成的變數使用新關鍵影格覆蓋現有動畫。

JSFiddle 範例示範了此技術。它最初運行 -10 到 10 度的旋轉動畫，但允許用戶在單擊按鈕時生成 -360 到 360 度之間的隨機旋轉值。

此範例利用 Simon Hausmann 的早期實驗，無縫覆蓋關鍵影格現代瀏覽器，如 Chrome 和 Safari。不過，隨機數產生功能是從 Admixweb 借用的。

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