使用 JavaScript 变量动态设置 Webkit 关键帧旋转值
您的目标是将 JavaScript 变量合并到 CSS 关键帧中以随机旋转元素。不幸的是，CSS 无法直接解释 JavaScript 变量。
动态创建 CSS 规则
要实现您的目标，您需要在 JavaScript 中创建或修改 CSS 规则并添加它们CSS 对象模型 (CSSOM)。此方法涉及：
示例实现
考虑以下覆盖示例现有的“旋转”关键帧动画：
<script>
// Generate random rotation values
var dogValue = "20deg";
var minValue = -360;
var maxValue = 360;
// Create a new keyframe rule
var styleElement = document.createElement('style');
document.head.appendChild(styleElement);
// Define the new keyframes
var keyframes = `
@-webkit-keyframes rotate {
0% {-webkit-transform: rotate(${minValue}deg);}
100% {-webkit-transform: rotate(${maxValue}deg);}
}
`;
// Overwrite the existing keyframe animation
styleElement.innerHTML = keyframes;
// Apply the new animation to the target element
var dogElement = document.getElementById('dog');
dogElement.style.animation = "rotate 5s infinite alternate ease-in-out";
</script>此代码创建一个具有随机旋转值的新“旋转”关键帧动画，并将其添加到 CSSOM。然后，它会覆盖应用于“#dog”元素的现有“旋转”动画。
通过利用此技术，您可以使用 JavaScript 变量动态修改 CSS 关键帧值。
以上是如何使用 JavaScript 动态控制 WebKit 关键帧旋转？的详细内容。更多信息请关注PHP中文网其他相关文章！
