您需要旋轉 div 並將其停止在伺服器回應確定的特定位置。使用原生JS進行旋轉和停止會消耗過多的CPU資源。
利用CSS動畫旋轉，但需要動態定義類別來指定停止位置：
@-webkit-keyframes spinIt {
100% {
-webkit-transform: rotate(A_DYNAMIC_VALUE);
}
}
@-moz-keyframes spinIt {
100% {
-webkit-transform: rotate(A_DYNAMIC_VALUE);
}
}動態插入樣式表規則來覆蓋先前的樣式：
var style = document.createElement('style');
style.type = 'text/css';
var keyFrames = '\
@-webkit-keyframes spinIt {\
100% {\
-webkit-transform: rotate(A_DYNAMIC_VALUE);\
}\
}\
@-moz-keyframes spinIt {\
100% {\
-webkit-transform: rotate(A_DYNAMIC_VALUE);\
}\
}';
style.innerHTML = keyFrames.replace(/A_DYNAMIC_VALUE/g, "180deg");
document.getElementsByTagName('head')[0].appendChild(style);將A_DYNAMIC_VALUE替換為所需的停止位置（例如“180deg”）並將樣式元素附加到頭部動態應用動畫的文件。
以上是如何根據伺服器回應動態建立 CSS @-keyframes 動畫？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
