js如何动态改变css关键帧

这篇文章主要讲解了“js如何动态改变css关键帧”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“js如何动态改变css关键帧”吧！

站在用户的角度思考问题，与客户深入沟通，找到宜川网站设计与宜川网站推广的解决方案，凭借多年的经验，让设计与互联网技术结合，创造个性化、用户体验好的作品，建站类型包括：网站设计制作、成都网站设计、企业官网、英文网站、手机端网站、网站推广、域名与空间、网页空间、企业邮箱。业务覆盖宜川地区。

js动态改变css关键帧的方法：1、通过“document.styleSheets”接口获取网页上引入的link样式表和style样式表；2、通过“insertRule(rule,index)”方法插入新的“@keyframes”规则即可。

js动态修改CSS3中@keyframes规则

这里有一个时钟的小demo，给到的素材如下图：

js如何动态改变css关键帧
秒针的初始方向是朝向6点的，我们设置秒针旋转一周的@keyframes规则

	@keyframes rotate {
		   from{
		   	   transform: rotate(0deg);
		   }
          to{
              transform: rotate(360deg);
          }
	}

这样设置是可以正常旋转一周的，但是如果我们改变秒针的初始位置，比如设置到12点方向

	transform: rotate(180deg);

那么之前的@keyframes规则需要从 0deg=>360deg 转变成 180deg=>540deg

那么问题就出现了，这个修改并不是动态的，我们不能每一次都在样式中修改@keyframes规则
这里就要借助我们的js了

首先通过document.styleSheets接口获取网页上引入的link样式表和style样式表

	var style = document.styleSheets[0];

js如何动态改变css关键帧
然后通过insertRule(rule,index)方法插入新的@keyframes规则

	var newdeg = 540;
	style.insertRule("@keyframes secondrotate {to{transform: rotate(" + newdeg + "deg);}}",4);

这样我们需要的效果就达成了

js如何动态改变css关键帧

感谢各位的阅读，以上就是“js如何动态改变css关键帧”的内容了，经过本文的学习后，相信大家对js如何动态改变css关键帧这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是创新互联，小编将为大家推送更多相关知识点的文章，欢迎关注！

本文名称：js如何动态改变css关键帧
转载源于：http://kswjz.com/article/jsjcoe.html

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流

行业动态