0

嗨，我正在使用 css3 为加载程序设置动画，我想让它独立于颜色。我的关键帧 CSS3 代码是

#floatingCircle{
    position:relative;
    width:60px;
    height:60px;
    -moz-transform:scale(0.6);
    -webkit-transform:scale(0.6);
    -ms-transform:scale(0.6);
    -o-transform:scale(0.6);
    transform:scale(0.6);
}

.f_circle{
    position:absolute;
    background-color:#FFFFFF;
    height:11px;
    width:11px;
    -moz-border-radius:5px;
    -moz-animation-name:f_fadeG;
    -moz-animation-duration:1.04s;
    -moz-animation-iteration-count:infinite;
    -moz-animation-direction:linear;
    -webkit-border-radius:5px;
    -webkit-animation-name:f_fadeG;
    -webkit-animation-duration:1.04s;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-direction:linear;
    -ms-border-radius:5px;
    -ms-animation-name:f_fadeG;
    -ms-animation-duration:1.04s;
    -ms-animation-iteration-count:infinite;
    -ms-animation-direction:linear;
    -o-border-radius:5px;
    -o-animation-name:f_fadeG;
    -o-animation-duration:1.04s;
    -o-animation-iteration-count:infinite;
    -o-animation-direction:linear;
    border-radius:5px;
    animation-name:f_fadeG;
    animation-duration:1.04s;
    animation-iteration-count:infinite;
    animation-direction:linear;
}
#frotateG_01{
    left:0;
    top:25px;
    -moz-animation-delay:0.39s;
    -webkit-animation-delay:0.39s;
    -ms-animation-delay:0.39s;
    -o-animation-delay:0.39s;
    animation-delay:0.39s;
}

#frotateG_02{
    left:7px;
    top:7px;
    -moz-animation-delay:0.52s;
    -webkit-animation-delay:0.52s;
    -ms-animation-delay:0.52s;
    -o-animation-delay:0.52s;
    animation-delay:0.52s;
}

#frotateG_03{
    left:25px;
    top:0;
    -moz-animation-delay:0.65s;
    -webkit-animation-delay:0.65s;
    -ms-animation-delay:0.65s;
    -o-animation-delay:0.65s;
    animation-delay:0.65s;
}

#frotateG_04{
    right:7px;
    top:7px;
    -moz-animation-delay:0.78s;
    -webkit-animation-delay:0.78s;
    -ms-animation-delay:0.78s;
    -o-animation-delay:0.78s;
    animation-delay:0.78s;
}

#frotateG_05{
    right:0;
    top:25px;
    -moz-animation-delay:0.91s;
    -webkit-animation-delay:0.91s;
    -ms-animation-delay:0.91s;
    -o-animation-delay:0.91s;
    animation-delay:0.91s;
}

#frotateG_06{
    right:7px;
    bottom:7px;
    -moz-animation-delay:1.04s;
    -webkit-animation-delay:1.04s;
    -ms-animation-delay:1.04s;
    -o-animation-delay:1.04s;
    animation-delay:1.04s;
}

#frotateG_07{
    left:25px;
    bottom:0;
    -moz-animation-delay:1.17s;
    -webkit-animation-delay:1.17s;
    -ms-animation-delay:1.17s;
    -o-animation-delay:1.17s;
    animation-delay:1.17s;
}

#frotateG_08{
    left:7px;
    bottom:7px;
    -moz-animation-delay:1.3s;
    -webkit-animation-delay:1.3s;
    -ms-animation-delay:1.3s;
    -o-animation-delay:1.3s;
    animation-delay:1.3s;
}

@-moz-keyframes f_fadeG{
    0%{
        background-color:#000000}

    100%{
        background-color:#FFFFFF}

}

请帮助我使用 javascript 更改关键帧 100% 部分的背景颜色。
提前致谢！

4

1 回答 1

1

这实际上是一个相当复杂的过程。首先您需要在 javascript 中获取关键帧对象，然后您必须创建一个新版本。以下是一个可以工作的未经测试的版本（可能有一些变化），但我认为它不会像你想要的那样工作

注意：目前的设置方式仅适用于 webkit，如果您想为所有浏览器提供服务，则需要添加更多浏览器前缀

// Function to get the keyframe object based on the name
function findKeyframesRule(rule) {
    var ss = document.styleSheets;
    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.WEBKIT_KEYFRAMES_RULE && 
                ss[i].cssRules[j].name == rule) { return ss[i].cssRules[j]; }
        }
    }
    return null;
}

// Function to change the last keyframe of the given animation to the new color
function changeAnimColor(animationName, color) {
    var keyframes = findKeyframesRule(animationName);
    keyframes.deleteRule('100'); 
    keyframes.insertRule("100% { background-color:" + color + "; }");
}

changeAnimColor("f_fadeG", "#FF00FF");

我相信您想要更改动画以允许每个动画frotateG都有自己的颜色，但是这种方法会改变每个动画的背景颜色，因此它们都是相同的。让每个对象都有自己的动画颜色的最简单方法是不使用 js，而是为该类型的每个对象创建单独的 CSS 动画。然后你可以使用我提供的函数来改变点击时的动画颜色，或者如果你愿意，可以使用数组和一些递归

有关此主题的更多信息，您可以查看我关于 Javascript 与 CSS 动画和过渡的交互的 CSS 技巧文章，请点击此处

于 2013-10-17T17:18:17.267 回答