通过JavaScript或jQuery更改投影的CSS3动画

change css3 animation of drop-shadow by javascript or jquery

本文关键字：投影 CSS3 动画 JavaScript jQuery 通过      更新时间：2023-09-26

我用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/

试试这个： 

$(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);
});

这是演示。

相关文章：