javascript - 通过javascript或jquery更改阴影的css3动画

Question

我使用 css3 -webkit-animation 给出了我的 img 样式。这个 CSS 将阴影样式从一个属性更改为另一个属性。（眨）

这是CSS

.firstglow {
    height: 200px;
    -webkit-animation: hide 0.3s linear 0s infinite alternate;  
}

@-webkit-keyframes hide {
    0% {-webkit-filter: drop-shadow(3px 3px 40px rgba(255,251,0,1)); }
    100% { -webkit-filter: drop-shadow(0px 0px 40px rgba(255,251,0,0.5)); }
}

我需要通过 javascript 动态更改我的代码并更改颜色元素

这是我尝试过的 jQuery：

$('.firstglow').css("-webkit-animation","newGlow 0.5s linear 0s infinite alternate;");

var lastSheet = document.styleSheets[document.styleSheets.length - 1];
lastSheet.insertRule("@-webkit-keyframes newGlow { 0% {-webkit-filter: drop-shadow(3px      3px 40px " +  myCharacterColor + " 1)); } 100% { -webkit-filter: drop-shadow(0px 0px 40px" + myCharacterColor + "0.5)); } }", lastSheet.cssRules.length);

这是文件：

http://jsfiddle.net/VbzFj/

Answer 1

尝试这个 ：

$(document).ready(function (){

    $('.firstglow').css("-webkit-animation", "newGlow 0.5s linear 0s infinite alternate");

    var lastSheet = document.styleSheets[document.styleSheets.length - 1];
    myCharacterColor = 'rgba(182, 17, 17, 0.5)';

    var styelRule = "";

    if (navigator.userAgent.search("Chrome") >= 0) {
        styelRule = '@-webkit-keyframes newGlow{0%{-webkit-filter:drop-shadow(3px 3px 40px ' + myCharacterColor + ');}100%{-webkit-filter:drop-shadow(0px 0px 40px ' + myCharacterColor + ');}}';
    }
    else if (navigator.userAgent.search("Firefox") >= 0) {
        styelRule = '@-moz-keyframes newGlow{0%{-webkit-filter:drop-shadow(3px 3px 40px ' + myCharacterColor + ');}100%{-webkit-filter:drop-shadow(0px 0px 40px ' + myCharacterColor + ');}}';
    }
    else {
        styelRule = '@keyframes newGlow{0%{-webkit-filter:drop-shadow(3px 3px 40px ' + myCharacterColor + ');}100%{-webkit-filter:drop-shadow(0px 0px 40px ' + myCharacterColor + ');}}';
    }

    lastSheet.insertRule(styelRule, lastSheet.cssRules.length);
});

这是演示。