如何使用 @-keyframes 動態建立 CSS 動畫，以根據伺服器端值控制元素旋轉？

動態產生 @-Keyframe CSS 動畫

創建動態修改樣式屬性的 CSS 動畫可能是一項具有挑戰性的任務。常見的場景是旋轉元素並將其停止在特定位置，該值通常從伺服器接收。

使用本機 JavaScript 的傳統方法可能需要大量計算。然而，使用 CSS 動畫提供了更有效的解決方案。為此，我們需要動態建立一個定義動畫終點的類別。

在提供的程式碼中，我們動態地將樣式表規則插入 head 元素中。這項技術使我們能夠覆蓋現有樣式，並避免需要額外的庫來完成特定任務。

我們建立一個樣式元素並將其類型設為「text/css」。然後，我們定義包含 @-webkit-keyframes 和 @-moz-keyframes 規則的 keyFrames 字串。要動態設定結束旋轉，我們將字串中的佔位符 A_DYNAMIC_VALUE 替換為所需的值，例如「180deg」。

最後，我們將 style 元素附加到 head 元素，插入動態產生的 CSS 規則到文件中。這段程式碼讓我們可以精確控制元素旋轉，而不會顯著影響 CPU 使用率。

以上是如何使用 @-keyframes 動態建立 CSS 動畫，以根據伺服器端值控制元素旋轉？的詳細內容。更多資訊請關注PHP中文網其他相關文章！