如何使用 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中文网其他相关文章！