jquery @keyframes 动态添加

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

weixin_34259559

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

阅读量2.3k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/userzf/p/9927456.html

本文详细介绍了如何使用CSS3实现动画效果，并通过JavaScript动态控制和修改这些动画。具体展示了两个旋转动画的创建过程，以及如何利用XMLDOM的insertRule方法将动画样式动态插入到CSSStyleSheet中。

需要写一个css3的动画效果，且需要按着写的事件同事进行需控制样式

css代码

                @keyframes spin1 {
                0% {
                    transform: rotate(225deg);
                }
                50% {
                    transform: rotate(225deg);
                }
                100% {
                    transform: rotate(405deg);
                }
            }
            
            @keyframes spin2 {
                0% {
                    transform: rotate(225deg);
                }
                50% {
                    transform: rotate(405deg);
                }
                100% {
                    transform: rotate(405deg);
                }
            }


    var tt=document.styleSheets[0];
                //tt.deleteRule(6);//清除之前写入的动画样式
                console.log(tt);
                tt.insertRule("@keyframes spin1 { 0% { transform: rotate(225deg); } 50% { transform: rotate(225deg); } 100% { transform: rotate(405deg); } }",9);//写入样式
                tt.insertRule("@keyframes spin2 { 0% { transform: rotate(225deg); } 50% { transform: rotate(405deg); } 100% { transform: rotate(405deg); } }",10);//写入样式

XML DOM insertRule() 方法
CSSStyleSheet 对象参考手册