js 创建keyframe_js动态修改@keyframes

最新推荐文章于 2024-08-25 07:30:53 发布

Parker Sept

最新推荐文章于 2024-08-25 07:30:53 发布

阅读量1.1k

点赞数

文章标签： js 创建keyframe

本文链接：https://blog.csdn.net/weixin_35959694/article/details/112811086

版权

本文介绍了如何使用JavaScript动态修改CSS3的@keyframes规则。首先通过`findKeyframesRule`函数找到包含指定keyframes的styleSheet，接着删除原有规则，最后插入新的动画帧定义。在操作过程中可能会遇到跨域CSS资源的问题，解决方案已在文中提及。通过这种方式，可以实现在运行时更新CSS动画效果。

摘要由CSDN通过智能技术生成

css3中@keyframes是写死的，如果需要动态修改则需要js，其实操作起来也很简单，只是一些用到了一些不常用的api

1、获取页面样式表并查找keyframes所在的styleSheet

2、删除原来的styleSheet里的动画帧

3、添加js动态修改过后的动画帧

实现三个步骤的代码

1、关于获取styleSheet这里给出了一个通用方法

functionfindKeyframesRule(rule) {//此处过滤非同源的styleSheet，因为非同源的无法访问cssRules，会报错

var ss = Array.from(document.styleSheets).filter((styleSheet) => !styleSheet.href ||styleSheet.href.startsWith(window.location.origin))for (var i = 0; i < ss.length; ++i) {for (var j = 0; j < ss[i].cssRules.length; ++j) {if (ss[i].cssRules[j].type === window.CSSRule.KEYFRAMES_RULE && ss[i].cssRules[j].name ===rule) {returnss[i]

}

}return null}

遍历获取styleSheet过程中如果遇到“Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules”错误说明你的网页引入了跨域的css资源，