Question

您好我正在使用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％部分的背景颜色提前谢谢！

Answer 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动画和过渡found here

交互的CSS技巧文章

如何使用javascript更改关键帧背景颜色？

1 个答案: